Domov › Telefon › Velikosti odsazení HTML. Obecné postupy formátování obsahu. Pravidla, která mění polohu prvků

Velikosti odsazení HTML. Obecné postupy formátování obsahu. Pravidla, která mění polohu prvků

Okraje a odsazení jsou velmi důležité styly při vytváření stránky HTML. Umožňují přesněji umístit prvky, vytvořit rám s potřebnými mezerami atd. Oba styly jsou velmi podobné a plní podobné funkce. Ale stále existují rozdíly.

Prvky mohou být vnořené nebo umístěné vedle sebe. Podívejme se na následující příklad:

Máme dva stoly, citron a modrá barva, umístěné pod sebou. Tabulky se skládají z jedné buňky. V první buňce tabulky je červený blok. Na tomto příkladu se podívejme, jak fungují okraje a odsazení.

Pole jsou nastavena stylem vycpávka. Tento styl se vztahuje pouze na prvky kontejneru, které mohou obsahovat další prvky. Styl umožňuje nastavit okraj mezi okraji prvku a jeho obsahem. Styl okraj umožňuje nastavit odsazení od prvku k nejbližším hranicím jiného prvku. Hranicemi jiného prvku mohou být hranice nadřazeného kontejneru i okraje samotné stránky.

Existuje několik způsobů, jak definovat tyto styly. Například přímo zadejte velikost všech okrajů nebo odsazení jedním argumentem v nějaké měrné jednotce (px, ex, em, pt, cm atd.):

výplň: 3px; okraj: 3px;

V tomto případě budou okraje a odsazení na všech čtyřech stranách stejné. Při zadávání dvou argumentů oddělených mezerou:

odsazení: 3px 5px; okraj: 3px 5px;

první určí velikost okrajů/odsazení nahoře a dole, druhý vlevo a vpravo. Když jsou uvedeny tři argumenty:

odsazení: 3px 5px 2px; okraj: 3px 5px 2px;

první je okraj/odsazení nahoře, druhý je vlevo i vpravo, třetí je dole. Se čtyřmi argumenty:

odsazení: 3px 5px 2px 6px; okraj : 3px 5px 2px 6px ;

první je okraj/mezera nahoře, druhý je vpravo, třetí je dole, čtvrtý je vlevo. Je snadné si to zapamatovat: první je shora, pak ve směru hodinových ručiček. Kromě toho můžete nastavit okraje a odsazení pro konkrétní okraj samostatně pomocí příslušných stylů: polstrování-top, vycpávka-vpravo, vycpávka-dno, polstrování-vlevo, margin-top, okraj-pravý, okraj-dole, okraj-levý. Hodnotou těchto stylů může být pouze jeden argument, který určuje velikost okraje/výplně pro danou stranu.

Na obrázku je červený blok uvnitř buňky tabulky a sousedí s jejími okraji, to znamená, že buňka nemá žádné okraje. Nastavíme okraje buněk pomocí stylu:

výplň: 5px;

V důsledku toho se stránka změní na následující:

Podívejme se nyní na odsazení. Dvě tabulky sousedí vedle sebe, pokud je chceme trochu oddálit, můžeme použít odsazení. Zde jsou dvě možnosti: buď nastavit spodní odsazení první tabulky, nebo horní odsazení druhé tabulky. Použijme to druhé:

margin-top: 5px;

Upozorňujeme, že odsazení nastavujeme konkrétně na tabulku, a ne na buňku tabulky, jako je tomu u polí. Zde je výsledek:

Mimochodem, v prvním případě (mezera mezi červeným blokem a hranicemi nadřazené buňky) by se stejného efektu dalo dosáhnout nastavením odsazení bloku. Obecně platí, že pokud něco není jasné, dejte nám vědět v komentářích.

HTML kód testovací stránky:

<html > <hlava > <titul > Test</title> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </hlava> <tělo > <styl > tabulka (šířka: 200px; výška: 150px; ohraničení: 1px plný #555; border-collapse: sbalit) td (vertikální zarovnání: nahoře; odsazení: 0px) div (šířka: 100px; výška: 100px; pozadí: červené)</styl> <styl tabulky = "pozadí: limetka" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabulka> <styl stolu = "pozadí: skyblue; margin-top: 5px"> <tr > <td ></td> </tr> </tabulka> </body> </html>

Do odstavce (tag

) a záhlaví (tag

) automaticky přidá horní a spodní výplň, což v součtu dává velká vzdálenost mezi nadpisem a textem. Chcete-li snížit míru odsazení, musíte explicitně přidat vlastnost margin-bottom do selektoru H1. Navíc můžete nastavit kladnou, nulovou nebo zápornou hodnotu. Tímto způsobem je snadné nastavit požadovanou hodnotu odsazení.

Jak mohu přidat odsazení prvního řádku pro každý odstavec?

Kdy nainstalovat odsazení odstavce, je nejlepší použít styl vlastnost text-indent. Jeho hodnota určuje, o kolik se má text prvního řádku posunout doprava začáteční pozice. Šířka textový blok nemění se však a zůstává původně specifikován. Velikost odsazení lze zadat v pixelech, procentech nebo jiných dostupných jednotkách (příklad 1).

Jak změnit odsazení na webové stránce?

Odsazení na webové stránce, i když není viditelné, neumožňuje, aby se obsah vešel do jedné roviny s okraji okna prohlížeče, aby bylo čtení pohodlné. Vaše vlastní hodnota Okraje lze nastavit změnou hodnot vlastnosti margin selektoru těla.

Jak odstranit výplň kolem formuláře?

Při přidávání formuláře pomocí značky

kolem ní nahoře a dole se automaticky přidá vycpávka. Chcete-li je odstranit, použijte stylová nemovitost rozpětí s nulová hodnota jeho přidáním do voliče FORMULÁŘ.

Jak změnit vzdálenost mezi odstavci textu?

Při použití značky

Nad a pod se automaticky přidávají odrážky textový odstavec. To se provádí za účelem vizuálního oddělení jednoho bloku textu od druhého. Je jasné, že výchozí hodnoty odsazení nejsou vždy uspokojivé, takže je někdy nutné je snížit nebo zvýšit. K tomu můžete použít univerzální vlastnost margin , která určuje odsazení na všech stranách odstavce nebo margin-top pro odsazení nahoře a margin-bottom pro odsazení dole.

Webový zdroj je hodnocen uživateli na základě jeho vizuální přitažlivosti. Proto i informačně užitečný text nemusí být možné přečíst kvůli skutečnosti, že je špatně naformátován. Závěr - musíte pečlivě a pozorně přistupovat nejen k sémantickému obsahu stránek webu, ale také k jeho vizuální reprezentace. Vzhled CSS technologie rozšířil možnosti tvorby atraktivních článků. Jednou z vlastností navržených pro snadnější čtení toho, co je napsáno, je odsazení. CSS text.

Okraje a výplň: Jaký je rozdíl?

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

pole je určeno vlastností vycpávka, Odrážka - okraj;
okraj je určen mezerou mezi obsahem a okrajem bloku, odsazením - mezi okraji sousedních bloků;
okraje mohou, ale nemusí být zohledněny v rozměrech prvku (šířka a výška).

vlastnost marže

Chcete-li tedy nastavit vodorovné nebo svislé odsazení textu CSS, použijte konstrukci okraj. Tato vlastnost platí pro značku definující odstavec dokumentu. Ve velmi jednoduchý případ píše se to takto:

okraj: 12px.

Tento řádek znamená, že kolem bloku textu (nebo jakéhokoli jiného bloku) bude na všech stranách odsazení 12 pixelů. Chcete-li interval zvýšit například třikrát, stačí napsat:

okraj: 36px.

Ale co když by interval mezi bloky měl být na každé straně jiný? Vývojáři webových stránek používají několik forem záznamu:

okraj: 11px 22px.
okraj: 11px 22px 33px.
okraj: 11px 22px 33px 44px.

V prvním příkladu bude 11 pixelů odsazeno od spodního a horního okraje bloku a 22 pixelů po stranách bloku. Podle druhé formy záznamu bude mezi horním okrajem bloku a obsahem 11 pixelů, mezi spodním 33 pixelů a 22 pixelů po stranách. Ve třetím případě bude výplň 11 pixelů nahoře, 22 pixelů vpravo, 33 pixelů dole a 44 pixelů vlevo.

Je také možné zaznamenat vzdálenost k hranici bloku pouze na jedné straně: margin-top, margin-bottom, margin-left, margin-right. Překladem názvů nemovitostí do ruštiny je snadné uhodnout jejich účel. Například, další záznamříká, že pravý okraj bude 22 pixelů:

pravý okraj: 22 pixelů.

Pro ostatní strany se berou vzdálenosti kolem bloku rovna hodnotě nadřazený prvek.

Vlastnictví okraj má funkci, na kterou musí vývojář pamatovat při používání vertikálního odsazení textu CSS. Intervaly sousedních prvků se nesčítají, ale překrývají se. Nechte například jeden z bloků mít okraj-dolní: 15px a k ní přilehlý blok níže margin-top: 35px. Školní aritmetika a zdravý rozum naznačují, že celkový prostor mezi nimi bude 50 pixelů. V praxi tomu tak není. Blokovat pomocí skvělá hodnota vlastnosti okraj„pohltí“ svého souseda. V důsledku toho bude rozestup mezi prvky 35 pixelů.

"Červená čára

Sestavení dokumentu v textový editor, uživatelé se raději ptají každého nový odstavec pomocí červené čáry. Používáním CSS odsazení text vlevo je snadno vyrobitelný - konstrukce je použitá odsazení textu. Píše se to takto:

odsazení textu: 11 pixelů.

To znamená, že první řádek odstavce bude posunut vzhledem k levému okraji o 11 pixelů. Aby se text na webové stránce podobal dokumentu v editoru, měli byste dodatečně nastavit, tedy napsat:

odsazení textu: 11px;

text-align: zarovnat.

Kromě pixelů je při popisu značení povoleno používat další jednotky - palce, body, procenta. Nechte blok mít odsazení textu CSS 10 %. Při šířce bloku 500 pixelů bude červená čára 50 pixelů (10 % z 500).

Pro této nemovitosti hodnotu lze nastavit zdědit. Tento záznam říká, že blok používá podobnou vlastnost jako rodičovský blok.

odsazení textu: zdědit.

Překvapivě to dá i zabrat záporné hodnoty! V tomto případě se vytvoří takzvané přesahy, to znamená, že hlavní text zůstane na svém místě a první řádek se posune doleva o 22 pixelů:

odsazení textu: -22px.

Chcete-li kromě toho zabránit tomu, aby písmena přesáhla levý okraj prohlížeče odsazení textu k nastavení pole musíte použít konstrukci:

padding-left: 22px.

Základní Vlastnosti CSS pro zvážení. A praxe je pomůže upevnit. Zde je několik poslední tipy Jak aplikovat naučený materiál při vývoji webových stránek:

červená čára a odsazení textu jsou různé pojmy ak jejich označení se používají různé vlastnosti;
Pro vertikální okraje neplatí pravidla matematiky - intervaly se překrývají, prvek s větší hodnotou „vyhrává“;
záporné odsazení odstavce se používá k označení prvního řádku odstavce pomocí obrázku.

Oblíbené v kategorii: