Jesle, jak odsadit textové CSS

Uživatel využívá webový zdroj pro svou atraktivitu zvenčí. Proto je možné přečíst i informativně užitečný text, protože je špatně navržen. Závěr - musíte pečlivě a pečlivě přistupovat nejen k sémantickému obsahu stránek stránek, ale ik jeho vizuálnímu zastoupení. Vznik technologie CSS rozšířil schopnost vytvářet atraktivní články. Jeden z vlastností určených k usnadnění vnímání písemného odsazení textu CSS.

Pole a odrážky: jaký je rozdíl?

Než začnete formátovat text, musíte pochopit, jaké pole a odrážky jsou. Navzdory tomu, že tyto prvky značení v některých případech vypadat stejně pro uživatele, mezi nimi existují zásadní rozdíly:


  • vzhledem k tomu, vlastnické právo čalounění, ústup - marže;
  • Pole je určeno prostorem mezi obsahem a hranicí bloku, mezerou mezi hranicemi sousedních bloků;
  • Polia mohou být vzaty v úvahu v prvcích prvku (šířka a výška), a ne.
  • margin property

    Takže pro nastavení horizontálního nebo vertikálního odstupu textu CSS použijte konstrukci okrajů. Tato vlastnost platí pro značku předpisového odstavce dokumentu. V nejjednodušším případě je napsán jako: okraj: 12 pixelů. Tato čára znamená, že kolem bloku textu (nebo jakéhokoli jiného bloku) bude 12 pixelů odsazeno ze všech stran. Pro zvětšení mezery například třikrát stačí napsat: margin: 36px. Ale co dělat, kdyžinterval mezi bloky by se měl lišit od každé strany? Vývojáři webových stránek používají několik forem psaní:
  • margin: 11px 22px.
  • okraj: 11px 22px 33px.
  • okraj: 11px 22px 33px 44px.
  • V prvním příkladu z dolní a horní meze bloku budou pro odsazení 11 pixelů na každé straně bloku - od 22 pixelů. Podle druhé formy psaní, mezi horním okrajem bloku a obsah bude 11 bodů ze dna - 33 pixel boky - 22 bodů. Ve třetím případě, odsazení textu CSS hodnota bude mít 11 bodů, z vrcholu 22 pixelů vpravo, 33 obrazových bodů a 44 pixelů od vlevo dole.


    K dispozici je také schopnost zaznamenat vzdálenost k hranici bloku pouze na jedné straně: margin-horní okraj dnem, margin-vlevo, margin-pravé. Přenosem jména vlastností do ruského jazyka je snadné odhadnout jejich účel. Například tato položka říká, že pravý okraj bude 22px: margin-right: 22px. Pro zbytek vzdálenosti se předpokládá, že vzdálenost kolem bloku se rovná hodnotě mateřského prvku. Vlastnost okrajů má funkci, kterou musí vývojář zapamatovat při vertikálním použití odsazení textu CSS. Intervaly sousedních prvků nejsou shrnuty, ale vzájemně se překrývají. Například nechte jeden z bloků mít spodní okraj: 15px a přiléhající okraj k dolní části: 35px. Školní aritmetika a zdravý rozum naznačují, že celková vzdálenost mezi nimi bude 50 pixelů. V praxi tomu tak není. Blok s velkou hodnotou vlastností okrajů "absorbuje" svého souseda. Výsledkem je interval mezi prvky 35 pixelů.

    Červená čára

    Při psaní dokumentu v textovém editoru uživatelé dávají přednost každému novému odstavci "červenou" čárou. Pomocí CSS je snadné vytvořit textový posun vlevo - použije se konstrukce textu a odsazení. Nahrává se takto: text-odrážka: 11px. To znamená, že první řádek odstavce se posune o relativní levý okraj o 11 pixelů. Chcete-li, aby text na webové stránce byl více připojen k dokumentu v editoru, je třeba dodatečně nastavit zarovnání v šířce, tj. Psát: text-odsazení: 11px; text-align: justify Kromě pixelů je při popisu označení možné použít i jiné jednotky - palce, body, procenta. Nechť blok má odsazení textu CSS rovnající se 10%. Při šířce bloku 500 pixelů bude červená čára 50 pixelů (10% z 500).
    Tuto vlastnost lze nastavit dědičnou hodnotu. Takový záznam říká, že blok používá podobnou vlastnost nadřazeného bloku. text-odrážka: dědí Překvapivě může odsazení odstavce mít negativní hodnoty! V takovém případě se tvoří tzv. Výkony, tj. Hlavní text zůstává na svém místě a první řádek se posune doleva o 22 pixelů: text-odrážka: -22px. Chcete-li zabránit tomu, aby písmena překročila levý okraj prohlížeče, musíte kromě textového odrážky použít konstrukci pro úkol v poli: padding-left: 22px.

    Užitečné tipy

    Zvažují se základní vlastnosti CSS pro formátování textu. A praxe jim pomůže konsolidovat. Zde jsou některé konečné tipy, jak používat studijní materiál při navrhování webových stránek:
  • červená čára a odrážkatext - různé pojmy a pro jejich vedení jsou používány různé vlastnosti;
  • pro vertikální odchylky se nevztahují pravidla matematiky - intervaly se překrývají, "vítězí" prvek s velkou hodnotou;
  • Záporné odsazení odstavce se používá k označení prvního odstavce odstavce s obrázkem.
  • Související publikace