Značka pridáva vypchávku v strede hore. Zmeňte odsadenie a horné medzery v CSS

Dobrý deň! Pôvodne som chcel tento článok rozdeliť na 4 menšie, ale potom som sa nad tým zamyslel. za čo? Je predsa pohodlnejšie, keď sa takéto informácie zhromažďujú v rámci jedného materiálu.

Dnes sa teda naučíme, ako na to CSS odsadenie vľavo a na všetkých ostatných stranách - vpravo, hore a dole. Môžu byť vyrobené pre obrázky a texty. Prichádzajú v dvoch typoch:

• Vonkajšie;
• Interné.

Pre prvú je kľúčovou vlastnosťou margin, pre druhú – výplň. Pre názornosť som pre vás urobil malý príklad. Aby bolo vizuálne vhodné rozlišovať medzi vnútorným a vonkajším priestorom, pridal som viditeľnú tabuľku. Pozrime sa, čo sa stalo?

Okraje

Ich zápisom do súboru so štýlom CSS môžete nastaviť orientáciu informačného bloku na stránke. Napríklad to posuniem doľava a dole. Dovoľte mi hneď ukázať, ako to bude vyzerať.

Vo všeobecnosti môžete na nastavenie odsadenia použiť nasledujúce možnosti.

Vľavo (okraj-vľavo).

Vpravo (okraj-vpravo).

Top (margin-top).

Dole (margin-bottom).

Teraz vám ukážem ďalšiu skvelú nuanciu.

Ako vidíte, môžete použiť jednu z možností - efekt je rovnaký. Iba v druhom prípade sa kód ukáže ako kompaktnejší. Všimnite si tiež, že zarážky sú nastavené v smere hodinových ručičiek. Všetko začína hore a končí vľavo.

Výplň

Tu je postup podobný. Až teraz pridám nové vlastnosti nie pre celú tabuľku, ale pre obsah stĺpcov.

Pozrime sa, čo z toho vzniklo.

Analogicky s vnútornými okrajmi v CSS môžu byť externé napísané v skrátenom kóde alebo pre strany oddelene.

Toto boli hlavné body. Nakoniec vám ukážem, ako si ešte môžete uľahčiť prácu.

Odsadenie na úrovni vybranej značky

Vo vyššie uvedených prípadoch sú nastavené pre text a obrázky súčasne. V skutočnosti môžete nastaviť vzdialenosť k prvkom na úrovni konkrétneho tagu. Ukážem vám, ako to funguje. Vrátim späť posledné zmeny a špecifikujem špeciálny kód v súbore štýlu.

Pozrime sa, čo sa stalo po uložení zmien.

Obrázok zostal na svojom mieste, iba text uzavretý v . Podobné manipulácie možno použiť aj na iné bloky, napríklad tr, span.

Ako dodatočné informácie Navrhujem, aby ste si prečítali publikáciu o úlohe. Sú tam aj dostatočne popísané zaujímavé spôsoby. Môže byť užitočné pri vytváraní červenej čiary v texte alebo pri vykonávaní iných akcií.

Okrem toho sa môžete prihlásiť na odber bezplatného bulletinu na e-mailové adresy. Na odber blogu existuje špeciálny formulár. Uvidíme sa neskôr.

Webový zdroj hodnotia používatelia na základe jeho vizuálnej príťažlivosti. Preto aj informačne užitočný text nemusí byť prečítaný kvôli tomu, že je zle navrhnutý. Záver - musíte starostlivo a pozorne pristupovať nielen k sémantickému obsahu stránok webu, ale aj k jeho vizuálnej prezentácii. Nástup technológie CSS rozšíril možnosti tvorby atraktívnych článkov. Jednou z vlastností navrhnutých na uľahčenie čítania je odsadenie textu CSS.

Okraje a výplň: Aký je rozdiel?

Než začnete formátovať text, mali by ste pochopiť, čo sú okraje a zarážky. Napriek tomu, že tieto značkovacie prvky v niektorých prípadoch vyzerajú pre používateľa rovnako, existujú medzi nimi zásadné rozdiely:

• pole je špecifikované vlastnosťou výplň, zarážka - marža;
• okraj je určený medzerou medzi obsahom a okrajom bloku, zarážka - medzi okrajmi susedných blokov;
• okraje môžu, ale nemusia byť zohľadnené v rozmeroch prvku (šírka a výška).

vlastnosť marže

Ak teda chcete nastaviť horizontálne alebo vertikálne odsadenie textu CSS, použite konštrukt marža. Táto vlastnosť sa vzťahuje na značku definovanie odseku dokumentu. Vo veľmi jednoduchý prípad píše sa to takto:

okraj: 12px.

Tento riadok znamená, že okolo bloku textu (alebo akéhokoľvek iného bloku) bude na všetkých stranách odsadenie 12 pixelov. Ak chcete interval zvýšiť napríklad trikrát, stačí napísať:

okraj: 36 pixelov.

Čo ak by však interval medzi blokmi mal byť na každej strane iný? Vývojári webových stránok používajú niekoľko foriem záznamu:

1. okraj: 11px 22px.
2. okraj: 11px 22px 33px.
3. okraj: 11px 22px 33px 44px.

V prvom príklade bude 11 pixelov odsadených od spodného a horného okraja bloku a 22 pixelov po stranách bloku. Podľa druhého záznamového formulára bude medzi horným okrajom bloku a obsahom 11 pixelov, medzi spodným 33 pixelov a po stranách 22 pixelov. V treťom prípade bude výplň 11 pixelov navrchu, 22 pixelov vpravo, 33 pixelov dole a 44 pixelov vľavo.

Je tiež možné zaznamenať vzdialenosť k hranici bloku iba na jednej strane: margin-top, margin-bottom, margin-left, margin-right. Prekladom názvov nehnuteľností do ruštiny je ľahké uhádnuť ich účel. Napríklad nasledujúci záznam hovorí, že pravý okraj bude 22 pixelov:

pravý okraj: 22 pixelov.

Pre ostatné strany sa predpokladá, že vzdialenosti okolo bloku sa rovnajú hodnote nadradeného prvku.

Nehnuteľnosť marža má funkciu, ktorú musí mať vývojár na pamäti pri používaní vertikálneho odsadenia textu CSS. Intervaly susedné prvky nie sú sčítané, ale navrstvené na seba. Napríklad, nechajte jeden z blokov mať okraj-dolný: 15 pixelov a vedľa nej susediaci blok pod ním margin-top: 35px. Školská aritmetika a zdravý rozum naznačujú, že celkový priestor medzi nimi bude 50 pixelov. V praxi to tak nie je. Blok s vysokou hodnotou nehnuteľnosti marža„pohltí“ svojho suseda. V dôsledku toho bude vzdialenosť medzi prvkami 35 pixelov.

"Červená" čiara

Vypracovanie dokumentu v textový editor, používatelia uprednostňujú špecifikovať každý nový odsek pomocou „červenej“ čiary. S pomocou CSS odsadenie textu vľavo je jednoduché - konštrukcia je použitá zarážka textu. Píše sa to takto:

zarážka textu: 11 pixelov.

To znamená, že prvý riadok odseku sa posunie oproti ľavému okraju o 11 pixelov. Aby sa text na webovej stránke podobal skôr dokumentu v editore, mali by ste dodatočne nastaviť, teda napísať:

zarážka textu: 11px;

zarovnanie textu: zarovnať.

Okrem pixelov je pri popisovaní značiek povolené používať aj iné jednotky - palce, body, percentá. Nechajte blok mať odsadenie textu CSS 10 %. Pri šírke bloku 500 pixelov bude mať červená čiara 50 pixelov (10 % z 500).

Túto vlastnosť je možné nastaviť na dediť. Tento záznam hovorí, že blok používa podobnú vlastnosť rodičovského bloku.

zarážka textu: zdediť.

Prekvapivo môže nadobúdať aj záporné hodnoty! V tomto prípade sa vytvoria takzvané presahy, to znamená, že hlavný text zostane na svojom mieste a prvý riadok sa posunie doľava o 22 pixelov:

zarážka textu: -22px.

Ak chcete zabrániť tomu, aby písmená presahovali ľavý okraj prehliadača, okrem zarážka textu na nastavenie poľa musíte použiť konštrukciu:

padding-left: 22px.

Sú preskúmané hlavné vlastnosti CSS. A prax ich pomôže upevniť. Tu je niekoľko tipov na záver, ako použiť to, čo ste sa naučili, pri vývoji vašich webových stránok:

• červená čiara a odsadenie textu sú rôzne pojmy a na ich označenie sa používajú rôzne vlastnosti;
• Pre zvislé odrážky neplatia matematické pravidlá - intervaly sa prekrývajú, prvok s väčšou hodnotou „vyhráva“;
• negatívne odsadenie odseku používa sa na označenie prvého riadku odseku pomocou obrázka.

Táto vlastnosť určuje, koľko vodorovného textového priestoru by sa malo zalomiť pred začiatkom prvého riadku textového prvku. Rozstup sa vypočíta z počiatočnej hrany prvku a kontajnera pre úroveň bloku.

Keďže veľká časť obsahu webovej stránky je vo forme textu, schopnosť upravovať tento text tak, aby bol atraktívny a zároveň efektívny, je dôležitou zručnosťou, ktorú musíte mať, aby ste sa stali webovým dizajnérom. Na odsadenie popisu a odseku by bola najbežnejšie používaná a odporúčaná metóda pomocou CSS. Tu vám budú poskytnuté rôzne príklady ako možno použiť CSS pre text a prvok odsadenia.

Nastavte horný okraj pomocou CSS

Na vytvorenie horných zarážok sa používa, potom samozrejme bez CSS vlastnosti nemôžeme to urobiť, pretože potrebujeme margin-top, to je hodnota, ktorá sa dá nastaviť rôznymi spôsobmi, napríklad v px a štandardne v pixeloch, em, % atď., takže všetko sa deje v štýle CSS v jednotkách meranie.

Príklad použitia:

Okrajový blok (
margin-top:50px;
}

Čo môžete vidieť na obrázku:

Môžete ho použiť aj na zhadzovanie blokov, tu môžete využiť vlastnosť tzv ľavý okraj Tiež okraj-pravý A okraj-dole. Tam, kde jednoducho označíme vlastnosť margin, kde je možné pre ňu na začiatku nastaviť 4 parametre, tu budeme pri koncepte uvažovať v smere hodinových ručičiek, kde začíname od vrchnej strany s pokračovaním pod každou zo strán.

okraj: 20px 50px 30px 50px;

V CSS je aj horná výplň

Stáva sa, že potrebujete zarovnať obsahový prvok vertikálne, to je relatívne k rodičovskému bloku, tu je možné použiť ďalšie vlastnosti, ako napríklad padding-top, ktorý štandardne robí, alebo skôr nastavuje vnútorné padding smerom nahor. Ak hovoríme o podobných vlastnostiach, ktoré sa dajú tiež zapísať a nastaviť analogickým spôsobom, tu máme maržu v px, em, % a ďalších jednotkách.

Príklad:

Výplňový blok (
padding-top: 47px;
}

Teraz môžeme zvážiť analógiu nehnuteľnosti marža A výplň, ktorý sa používa na nastavenie zarážok na iných stranách prvku bloku, ale už ide samostatne: polstrovanie-vľavo, polstrovanie-vpravo, vypchávka-dno. Kde si hneď nastavíte vzdialenosť akú potrebujete, len na všetky strany a všetko bude zároveň.

padding: 10px 20px 40px 50px;

Tu môžete na začiatku nastaviť hodnotu ako pre marža začnite, ako ste pochopili zhora, ale potom ide všetko v smere hodinových ručičiek, toto je vpravo, dole, vľavo atď.

Teraz v závislosti od rôzne situácie, máte možnosť odsadiť hornú časť CSS štýly, kde používame vlastnosti marža A výplňže je možné umiestniť potrebné prvky na stránku vášho internetového zdroja, ako ste zamýšľali a musíte urobiť.

Rozloženie CSS bolo vždy obdĺžnikové. Akékoľvek hladké línie sú kompetenciou vývojára. Pravidlá štýlu poskytujú dostatok možností, aby stránka získala hladký tvar v rámci rozlíšenia obrazovky. Ale každý prvok rozloženia je vždy obdĺžnik, v ktorom sa usporiadanie informácií riadi pravidlami CSS.

Celostranné odsadenie je dôležité pre každý prvok stránky, keď je úplne umiestnený, a vrchné odsadenie CSS je špecificky definované, pretože je dôležité pre rôzne prvky, najmä tie vložené.

Základné pravidlá polohovania

Blokový prvok má pravidlo pre odsadenie od strán prvku, ktorý obsahuje (margin), pravidlo pre odsadenie pre prvky v ňom (padding) a šírku okraja (border), ktoré možno tiež použiť.

Odsadenie v hornej časti je obzvlášť dôležité. CSS v rámci bloku spája pravidlá výplne s pravidlami pre absolútne a relatívne umiestnené prvky v rámci daného bloku.

Bežná prax pre pravidlá CSS: môžete zadať rovnaké odsadenie na všetkých stranách, v pároch hore/dole a vpravo/vľavo, alebo pre každú stranu samostatne. napr.

• okraj: 10px;
• výplň: 10px20px;
• výplň: 10px20px30px40px.

V prvom prípade sa nastaví odsadenie prvku zo strán vonkajšej nádoby, v ktorej sa nachádza. V druhom prípade sú okraje hore a dole 10px, vľavo a vpravo - 20px. V treťom prípade je veľkosť zarážok označená na všetkých stranách: hore, vpravo, dole a vľavo.

Vo všetkých týchto prípadoch odsadenie top CSS je 10 px.

Pravidlá, ktoré menia polohu prvkov

Ak prvok rozloženia nie je umiestnený absolútne, umiestni sa vo všeobecnom poradí tvorby stránky.

Ak definujeme padding on top CSS v elemente scCurrInfo, cieľ sa dosiahne, ale ak na úrovni li, tak nie.

V tomto príklade s použitím pravidla výplne: 40px; vyžaduje primerané zníženie pravidiel šírky a výšky o 80 pixelov. IN inak Veľkosť bloku scCurrInfo presiahne hranice vonkajšieho bloku.

Ak odstránime pravidlo výplne z popisu scCurrInfo, ale pridáme ho s hodnotou 20px do popisu štýlu položky zoznamu, dostaneme iba horná zarážka. Porovnávač cien túto hodnotu nepoužije na iné strany.

Prirodzene, toto použitie pravidla odsadenia sa vzťahuje na každý prvok li.

Všeobecné postupy formátovania obsahu

Niektorí vývojári dosahujú dokonalosť rozložením stránok pomocou blokových prvkov. Vraj ide o klasickú prax – začať tabuľkami a svoj vlastný vzdelávací proces ukončiť blokmi.

Voľnosť obsiahnutá v blokovom usporiadaní je fascinujúca a predstavivosť vývojára nemusí byť obmedzená prísnymi pravidlami tabuľky: iba riadky, iba bunky, zlúčené iba horizontálne a vertikálne. Nič zvláštne na vzťahových predstavách.

Medzitým majú tabuľky okrem zjavných nevýhod mnoho kvalitatívnych výhod. Pri vytváraní výplne v hornej časti CSS berie do úvahy výplň vľavo, vpravo (dole je špeciálny moment). Pravidlá buniek tabuľky vám umožňujú ovládať vertikálne aj horizontálne zarovnanie. Pomocou štýlov riadkov a ich kombinovaním so štýlmi buniek môžete vytvárať komplexné zobrazenia obsahu.

Obvyklé znázornenie stránky vo forme obdĺžnikov vôbec nebráni tomu, aby bola prezentovaná vo forme tabuľky. Sú to tiež obdĺžniky, ale sú to aj bunky tabuľky, to znamená, že majú svoje pravidlá, ktoré dopĺňajú pravidlá blokov.

Absolútna poloha

Blok s pravidlom POSITION: absolútna ; bude umiestnený na mieste určenom jeho súradnicami vzhľadom na blok, v ktorom sa nachádza.

Charakteristickou črtou pravidiel CSS je, že „prax je najlepším kritériom pravdivosti“ vo väčšine prípadov, najmä ak sa vyžaduje kompatibilita medzi prehliadačmi a rozloženie sa vykonáva manuálne, je vhodnejšie ako študovať plnohodnotné príručky na kaskádových štýloch.

Používanie tabuliek často vedie k problémom s posunom obsahu buniek. Podobný posun v rámci bloku neovplyvňuje vždy všetky prvky. Experimentovaním môžete dosiahnuť požadovaný výsledok. Triviálna úloha: ako odstránenie vrchnej výplne nie je pre CSS vždy triviálnym riešením.

V niektorých prípadoch, keď musíte rozložiť prvky stránky v útrobách nejakého obľúbeného redakčného systému webstránok, stále treba dbať nielen na experimentálnu prax, ale pozrieť sa aj na skúsenosti svojich kolegov.

Blokové rozloženie sa často používa pri vytváraní webovej stránky alebo blogu. V dôsledku toho je často potrebné odsadiť bloky. Z tohto dôvodu asi ako odsadiť v CSS podrobne popísané v tejto lekcii. Pre prehliadač je každá značka kontajnerom, ktorý má obsah, výplň, vonkajšie okraje a orámovanie. V tejto lekcii sa naučíme, ako vytvoriť vnútorné a vonkajšie zarážky a zvážiť ich hlavné parametre.

Na obrázku nižšie sú jasne znázornené parametre odsadenia bloku:

Ako vidíte, zarážky je možné robiť v štyroch smeroch: horné odsadenie (hore), spodné odsadenie (dolné), odsadenie vľavo (vľavo) a pravé odsadenie (vpravo). Jednotkami merania môžu byť pixely, percentá a ďalšie jednotky CSS – prečítajte si o nich viac. Tento tutoriál používa pixely.

Blokové čalúnenie

Vlastnosť zodpovedná za odsadenie v CSS je výplň. Pozrime sa teda na príklad nastavenia vnútornej výplne pre blok:

padding-top: 5px; /*hore padding*/ padding-left: 8px; /*ľavé padding*/ padding-right: 8px; /*pravé padding*/ padding-bottom: 5px; /*spodné čalúnenie*/

V tomto príklade je výplň nastavená samostatne pre každú stranu bloku. Okrem toho existuje niekoľko spôsobov, ako nastaviť odsadenie v CSS:

okraj: 5px 8px 5px 8px; /*horný, pravý, spodný, ľavý okraj*/ okraj: 5px 8px 5px; /*popisuje horný, ľavý, pravý, dolný okraj*/ okraj: 5px 8px; /*popisuje horný a spodný, pravý a ľavý okraj*/ margin: 7px; /*popisuje všetky vnútorné výplne 7px*/

Je ľahšie zapamätať si prvú a poslednú metódu. V prvom prípade sú odsadenia umiestnené v smere hodinových ručičiek (hore, vpravo, dole, vľavo) - v druhom prípade môžeme určiť ľubovoľnú mieru odsadenia, odsadenia na všetkých stranách budú rovnaké;

Blokovať okraje

Vlastnosť zodpovedná za okraje v CSS je marža. Príklady okrajov v CSS:

margin-top: 5px; /*horný okraj*/ ľavý okraj: 10px; /*ľavý okraj*/ pravý okraj: 10px; /*pravý okraj*/ margin-bottom: 5px; /*dolný okraj*/

padding: 5px 10px 5px 10px; /*horný, pravý, spodný, ľavý okraj*/ padding: 5px 10px 5px; /*popisuje hornú, ľavú a pravú, spodnú výplň*/ výplň: 5px 10px; /*popisuje hornú a spodnú, pravú a ľavú výplň*/ výplň: 7px; /*popisuje všetky okraje 7px*/

teda ako odsadiť v CSS- otázka nie je ťažká, ale veľmi relevantná. Aby ste lepšie porozumeli vyššie popísaným informáciám, mali by ste si uvedomiť, že existujú dve vlastnosti: padding – vnútorné zarážky a margin – externé zarážky. Tiež, ako už viete, existuje niekoľko spôsobov, ako nastaviť zarážky, môžete ich použiť.