Ťahák: Ako odsadiť textové CSS

Webový zdroj oceňujú užívatelia pre jeho vizuálnu príťažlivosť. Preto aj užitočné textové informácie nemožno čítať vzhľadom k tomu, že je zle navrhnutý. Záver - je potrebné starostlivo a pozorne nielen sémantického obsahu stránok, ale aj na jeho vizuálnej prezentácie. Príchod CSS technológia zvýšilo možnosť vytvorenia atraktívne články. Jednou z vlastností, ktoré majú uľahčiť vnímanie písaného - odsadenie textu CSS.

Margin a padding: aký je rozdiel?

Než začnete formátovať text, mali by ste pochopiť, čo marže a polstrovanie. Napriek tomu, že tieto prvky značenia v niektorých prípadoch vyzerať rovnako pre užívateľov, medzi nimi existujú zásadné rozdiely:

• Pole nastavuje výplň majetku, odsadenie - marže;
• pole je určené medzerou medzi obsahom a hranicu bloku, priestor - medzi hranicami susedných blokov;
• pole môže byť považovaná za prvok vo veľkosti (šírka a výška) a č.

vlastnosť margin

Takže ak chcete nastaviť vodorovné alebo zvislé textu padding CSS, použite návrh maržu. Táto vlastnosť sa vzťahuje ku značke

odseku hlavného dokumentu. V najjednoduchšom prípade môže byť zapísaný ako:

margin: 12px.

Tento riadok znamená, že okolo bloku textu (alebo akýkoľvek iný blok) na všetkých stranách je umiestnená v záreze 12 pixelov. Pre zvýšenie interval, napríklad trikrát stačí písať:

margin: 36px.

Ale čo v prípade, že interval medzi blokmi sa musí líšiť na každej strane? Weboví vývojári používať niekoľko foriem záznamov:

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

V prvom príklade sú zárez 11 bodov, sú vyrobené z dolnej a hornej hranice bloku, na bokoch bloku - 22 bodov. Podľa druhého záznamového zariadenia medzi horným okrajom a obsah bude 11 bodov, medzi spodným - 33 pixelov na každej strane - 22 bodov. V treťom prípade CSS odsadenia textu bude mať hodnotu 11 pixelov z hornej, pravá strana 22 bodov, 33 bodov a 44 bodov z ľavom dolnom rohu.

K dispozícii je tiež možnosť nahrávať vzdialenosť od bloku hranice iba na jednej strane: margin-top, margin-dole , margin-left, margin-vpravo. Prekladať názvy vlastností v ruskom jazyku, je ľahké odhadnúť, o ich vymenovaní. Napríklad nasledujúci položka znamená, že zárez na pravej strane sa bude rovnať 22 obrazových bodov:

margin-right: 22rh.

Pre zostávajúce vzdialenosti okolo stranách bloku predpokladá, že je rovná hodnote rodičovského prvku.

Margin Objekt má funkcie, ktoré vývojár potrebuje mať na pamäti pri použití CSS textu odsadené vo zvislom smere. Intervaly susedných prvkov sa nesčítajú, a ktoré sú vzájomne. Predpokladajme napríklad, že jedna z jednotiek má margin-bottom: 15 pixelov, a pod susednom bloku margin-top: 35px. Školský aritmetika a zdravý rozum velí, že celková vzdialenosť medzi nimi bude 50 pixelov. V praxi to tak nie je. Blok s veľkou hodnotou majetku marža «lastovička" svojho suseda. V dôsledku toho, je interval medzi prvkami 35 pixelov.

line "Red"

Tvorba dokumentu v textovom editore, užívatelia dávajú prednosť žiadať každý nový odsek s "červenou" línie. Pomocou CSS textu odsadenie naľavo je ľahké robiť - použitie textu odsadenie dizajn. Písaný to takto:

text-indent: 11px.

To je prvý riadok odseku je posunutý vzhľadom k ľavému okraju 11 pixelov. Ak chcete text na webovej stránke vyzeral skôr ako dokument v editore, mali by ste si nainštalovať ďalšie odôvodnenie, to znamená, že písať:

text-indent: 11px;

text-align: ospravedlniť.

Okrem pixelov, v popise použití iných značkovacích jednotiek - palca tvrdí percent. Let Jednotka má členité textu CSS, ktorá sa rovná 10%. Ak je šírka bloku 500 pixelov, červená čiara bude 50 pixelov (10% zo 500).

Pre túto vlastnosť môže byť vystavený hodnota Dediť. Tento záznam hovorí, že jednotka používa podobnú vlastnosť rodičovskej jednotke.

text-indent: Dediť.

Prekvapivé je, že zárez môže nadobúdať záporných hodnôt! V tomto prípade sa odhady sú tvorené takzvaným, ktorý je základným textu zostane na mieste a na prvom riadku je posunutý doľava o 22 obrazových bodov:

text-indent: -22px.

Písmená nie sú prešiel ľavého okraja prehliadača, okrem textu odsadenie by mala byť použitá pre definovanie štruktúru pole:

padding-left: 22px.

užitočných rád

Základné vlastnosti CSS pre formátovanie textu sú zvažované. A fix im pomohla praxe. Tu je niekoľko tipov na konečnej, ako použiť naučenú materiál vývoj webových aplikácií:

• červená čiara a odsadenie textu - rôzne koncepty a rôznymi vlastnosťami použitých na ich vedenie;
• Zvislé odsadenie pravidlá neplatia matematiku - intervaly prekrývajú, "víťazí" prvok s väčšiu hodnotu;
• záporná zarážka používa pre označenie prvý riadok odseku sa obrazu.