Tahák: Jak odsadit textové CSS

Webový zdroj ceněn pro uživatele, pro její vizuální přitažlivost. Proto i užitečné textové informace nelze číst vzhledem k tomu, že je špatně navržen. Závěr - je třeba pečlivě a pozorně nejen sémantického obsahu stránek, ale také na jeho vizuální prezentace. Příchod CSS technologie zvýšilo možnost vytvoření atraktivní články. Jednou z vlastností, které mají usnadnit vnímání psaného - odsazení textu CSS.

Margin a padding: jaký je rozdíl?

Než začnete formátovat text, měli byste pochopit, co marže a polstrování. Navzdory tomu, že jsou tyto značkovací prvky v některých případech vypadat stejně pro uživatele, existují zásadní rozdíly mezi nimi:

• Pole nastavuje výplň majetku, odsazení - marže;
• pole je určeno mezerou mezi obsahem a hranici bloku, prostor - mezi hranicemi sousedních bloků;
• pole může být považována za prvek ve velikosti (šířka a výška) a č.

vlastnost margin

Takže chcete-li nastavit vodorovné nebo svislé textu padding CSS, použijte konstrukční marže. Tato vlastnost se vztahuje ke značce

odstavce hlavního dokumentu. V nejjednodušším případě může být zapsán jako:

margin: 12px.

Tento řádek znamená, že kolem bloku textu (nebo jakýkoli jiný blok) na všech stranách je umístěna v zářezu 12 pixelů. Pro zvýšení interval, například třikrát stačí psát:

margin: 36px.

Ale co když mezi bloky intervalu by měly být různé na každé straně? Weboví vývojáři používat několik forem záznamů:

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

V prvním příkladu jsou zářez 11 bodů, jsou vyrobeny z dolní a horní hranice bloku, na bocích bloku - 22 bodů. Podle druhého záznamového zařízení mezi horním okrajem a obsah bude 11 bodů, mezi spodním - 33 pixelů na každé straně - 22 bodů. Ve třetím případě CSS odsazení textu bude mít hodnotu 11 pixelů z horní, pravá strana 22 bodů, 33 bodů a 44 bodů z levém dolním rohu.

K dispozici je také možnost nahrávat vzdálenost od bloku hranice pouze na jedné straně: margin-top, margin-dole , margin-left, margin-vpravo. Překládat názvy vlastností v ruském jazyce, je snadné odhadnout, o jejich jmenování. Například následující položka znamená, že zářez na pravé straně se bude rovnat 22 obrazových bodů:

margin-right: 22rh.

Pro zbývající vzdálenosti kolem stranách bloku předpokládá, že je rovna hodnotě rodičovského prvku.

Margin vlastnost má funkce, které vývojář potřebuje mít na paměti při použití textu CSS odsazeny ve svislém směru. Intervaly sousedních prvků se nesčítají, a které jsou vzájemně. Předpokládejme například, že jedna z jednotek má margin-bottom: 15 pixelů, a pod sousedním bloku margin-top: 35px. Školní aritmetika a zdravý rozum velí, že celková vzdálenost mezi nimi bude 50 pixelů. V praxi tomu tak není. Blok s velkou hodnotou majetku marže «vlaštovka“ svého souseda. V důsledku toho, je interval mezi prvky 35 pixelů.

line "Red"

Tvorba dokumentu v textovém editoru, uživatelé dávají přednost žádat každý nový odstavec s „červenou“ linie. Pomocí CSS textu odsazení nalevo je snadné dělat - použití textu odsazení design. Psaný to takhle:

text-indent: 11px.

To je první řádek odstavce je posunut vzhledem k levému okraji 11 pixelů. Chcete-li text na webové stránce vypadal spíš jako dokument v editoru, měli byste si nainstalovat další odůvodnění, to znamená, že psát:

text-indent: 11px;

text-align: ospravedlnit.

Kromě pixelů, v popisu použití jiných značkovacích jednotek - palce tvrdí procent. Nechť jednotka má CSS textu odsazení ve výši 10%. Pokud je šířka bloku 500 pixelů, červená čára bude 50 pixelů (10% ze 500).

Pro tuto vlastnost může být vystaven hodnota Dědit. Tento záznam říká, že jednotka používá podobnou vlastnost rodičovské jednotce.

text-indent: Dědit.

Překvapivé je, že zářez může nabývat záporných hodnot! V tomto případě jsou výstupky tvořeny tzv, která je základním textu zůstane na svém místě, a první řádek je posunut doleva o 22 obrazových bodů:

text-indent: -22px.

Písmena nejsou přešel levého okraje prohlížeče, kromě textu odsazení by měla být použita pro definování strukturu pole:

padding-left: 22px.

užitečných rad

Základní vlastnosti CSS pro formátování textu jsou zvažovány. A opravit jim pomohla praxe. Zde je několik tipů na konečné, jak použít naučenou materiál vývoj webových aplikací:

• červená čára a odsazení textu - různé koncepty a různými vlastnostmi použitých k jejich vedení;
• Svislé odsazení pravidla neplatí matematiku - intervaly překrývají, „vítězí“ prvek s větší hodnotu;
• negativní odsazení používá pro označení první řádek odstavce se obrazu.