Domov › Tarify › HTML offset okraje. Jak odsadit text a obrázky v HTML

HTML offset okraje. Jak odsadit text a obrázky v HTML

Dobrý den, milí čtenáři tohoto blogu! Dnes budeme pokračovat v učení o kaskádových stylech neboli CSS. V předchozích článcích jsme již obecně zkoumali blokové uspořádání webu. Díky tomu jsme začali mít docela profesionální webové stránky, ale něco jim chybělo. Ale s největší pravděpodobností jim chybí odsazení a rámečky. Dnes se podíváme na stylová pravidla margin, padding a border, která umožňují nastavit odsazení a rámečky pro html prvky.

Možnosti CSS odsazení

Pomocí kaskádových stylů je možné nastavit dva typy odsazení.

1.Odsazení je vzdálenost od pomyslné hranice prvku k jeho obsahu. Hodnota vzdálenosti se zadává pomocí parametru vycpávka. Toto odsazení patří k samotnému prvku a nachází se uvnitř něj.

2. Okraj— vzdálenost mezi okrajem aktuálního prvku webové stránky a hranicemi sousedních prvků nebo nadřazeného prvku. Velikost vzdálenosti je řízena nemovitostí okraj. Toto odsazení je umístěno mimo prvek.

Pro názornost obrázek:

Představte si například buňku vyplněnou textem. Výplň je pak vzdálenost mezi pomyslným okrajem buňky a textem, který obsahuje. A vnější okraj je vzdálenost mezi okraji sousedních buněk. Začněme vycpávkou.

Padding v CSS pomocí padding (nahoře, dole, vlevo, vpravo)

Vlastnosti stylu padding-left, padding-top, padding-right a padding-bottom umožňují nastavit hodnoty padding, v tomto pořadí, na levé, horní, pravé a dolní části prvku webové stránky:

Velikost odsazení lze zadat v pixelech (px), procentech (%) nebo jiných jednotkách přijatelných pro CSS. Při zadávání procent se hodnota vypočítá ze šířky prvku. Hodnota dědit označuje, že je zděděna od rodiče.

Například pro aktuální odstavec jsem použil pravidlo stylu, které nastavuje levé odsazení na 20 pixelů, horní odsazení na 5 pixelů, pravé odsazení na 35 pixelů a spodní odsazení na 10 pixelů. Zápis pravidla bude vypadat takto:

p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom: 10px
}

Pravidlo složeného odsazení umožňuje zadat odsazení na všech stranách prvku webové stránky najednou:

vycpávka:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Prefabrikované pravidlo umožňuje jednu, dvě, tři nebo čtyři hodnoty oddělené mezerou. V tomto případě závisí účinek na počtu hodnot:

pokud zadáte jednu hodnotu, nastaví se míra odsazení na všech stranách prvku stránky;
pokud zadáte dvě hodnoty, první nastaví míru odsazení nahoře a dole a druhá - vlevo a vpravo;
pokud zadáte tři hodnoty, pak první určí velikost odsazení nahoře, druhá - vlevo a vpravo a třetí - dole;
pokud jsou zadány čtyři hodnoty, první nastaví míru odsazení nahoře, druhá vpravo, třetí dole a čtvrtá vlevo.

Výše uvedené pravidlo CSS lze tedy co nejvíce zkrátit a zapsat následovně:

p.test( padding:5px 35px 10px 20px)

Vlastnost margin nebo okraje v CSS

Atributy stylu margin-left, margin-top, margin-right a margin-bottom umožňují nastavit hodnoty okrajů, v tomto pořadí, vlevo, nahoře, vpravo a dole:

Jak již bylo zmíněno výše, okraj je vzdálenost od okraje aktuálního prvku k okraji sousedního prvku nebo, pokud žádné sousední prvky neexistují, k vnitřní hranici nadřazeného kontejneru.

Velikost odsazení lze zadat v pixelech (px), procentech (%) nebo jiných jednotkách povolených pro CSS:

p(
margin-left: 20px;
}
h1(
pravý okraj: 15 %;
}

Hodnota auto znamená, že velikost odsazení bude automaticky vypočítána prohlížečem. Pokud použijete procentuální zápis, odsazení se vypočítá v závislosti na šířka nadřazeného kontejneru. Navíc to platí nejen pro levý okraj a pravý okraj, ale také pro okraj nahoře a okraj dole, procentuální okraje se vypočítají v závislosti na šířce, nikoli výšce kontejneru.

Je přípustné použít jako hodnoty vnějších odsazení záporné hodnoty:

p(
margin-left:-20px;
}

Pokud se při kladných hodnotách odsazení vzdalují sousední prvky, pak při záporné hodnotě bude sousední blok kolidovat s prvkem, pro který jsme nastavili takové záporné odsazení.

Můžeme také určit výplň pomocí atributu style okraj. Nastavuje hodnoty odsazení současně na všech stranách prvku webové stránky:

okraj:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Při zadávání jedné, dvou, tří nebo čtyř hodnot výplně se tato vlastnost řídí stejnými zákony jako pravidlo výplně.

Možnosti ohraničení pomocí vlastnosti ohraničení

Při nastavování rámců existují tři typy parametrů:

border-width — tloušťka hranice;
border-color — barva okraje;
border-style — typ čáry, kterou bude rámeček vykreslen.

Začněme parametrem tloušťky rámu:

šířka okraje: [hodnota | tenký | střední | tlustý] (1,4) | zdědit

Tloušťka rámu lze zadat v pixelech nebo jiných jednotkách dostupných v CSS. Proměnné tenký, střední a tlustý nastavují tloušťku okraje na 2, 4 a 6 pixelů:

border-width:medium;

Stejně jako u vlastností padding a margin, parametr border-width umožňuje jednu, dvě, tři nebo čtyři hodnoty, čímž lze nastavit šířku ohraničení pro všechny strany najednou nebo pro každou stranu zvlášť:

border-width: 5px 3px 5px 3px

Pro aktuální odstavec nastavte tloušťku horního okraje na 1 pixel, vpravo 2 pixely, spodní 3 pixely a levé 4 pixely pomocí pravidla (šířka okraje: 1 pixel 2 pixely 3 pixely 4 pixely;)

Pomocí atributů stylu border-left-width, border-top-width, border-right-width a border-bottom-width můžete nastavit tloušťku levé, horní, pravé a spodní strany ohraničení:

Dalším parametrem je border-color, kterým můžete ovládat barva rámu:

barva ohraničení: [barva | transparentní] (1,4) | zdědit

Vlastnost umožňuje nastavit barvu ohraničení pro všechny strany prvku najednou nebo jen pro zadané. Jako hodnotu můžete použít metody pro specifikaci barev akceptovaných v HTML: hexadecimální kód, klíčová slova atd.:

p (šířka okraje: 2px; barva okraje: červená)

transparentní nastaví barvu průhledného okraje a zdědí hodnotu rodiče. Ve výchozím nastavení, pokud není zadaná barva ohraničení, bude použita ta, která se používá pro písmo uvnitř daného prvku.

Pomocí atributů stylu border-left-color, border-top-color, border-right-color a border-bottom-color můžete nastavit barvu levé, horní, pravé a spodní strany ohraničení:

A poslední parametr border-style určuje typ rámu:

border-style: (1,4) | zdědit

Typ rámu lze zadat pro všechny strany prvku najednou nebo pouze pro zadané. Jako hodnoty můžete použít více klíčových slov. Vzhled bude záviset na použitém prohlížeči a tloušťce rámečku. Význam žádný se používá ve výchozím nastavení a nezobrazuje rámeček a jeho tloušťka je nastavena na nulu. Skrytá hodnota má stejný účinek. Výsledný rámec pro jiné hodnoty v závislosti na tloušťce je uveden v tabulce níže:

Atributy stylu border-left-style, border-top-style, border-right-style a border-bottom-style určují styl čar, které budou nakresleny na levé, horní, pravé a spodní straně ohraničení, respektive:

Stejně jako u možností vycpávky a vycpávky existují obecná hraniční vlastnost. Umožňuje současně nastavit tloušťku, styl a barvu okraje kolem prvku:

hranice: | zdědit

Hodnoty mohou být v libovolném pořadí, oddělené mezerami:

td (ohraničení: 1px sytě žlutá)

Chcete-li nastavit ohraničení pouze na určitých stranách prvku, existují vlastnosti border-top, border-bottom, border-left, border-right, které umožňují nastavit parametry pro horní, dolní, levou a pravou stranu prvku. rámy, resp.

Zbývá jen shrnout:

za úkol vycpávka nemovitost využíváme vycpávka;
konfigurovat okraje existuje pravidlo okraj;
parametry rámu jsou specifikovány pomocí atributu pohraniční.

Podotýkám, že všechny tyto vlastnosti CSS zvětšují velikost prvku webové stránky. Pokud tedy změníme tloušťku okraje nebo velikost vycpávky blokových kontejnerů, které tvoří design webové stránky, budeme muset odpovídajícím způsobem změnit velikost těchto kontejnerů, jinak se mohou posunout a design bude zlomený.

To je vše, uvidíme se příště!

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, citronový a modrý, 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 nastavit 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 experimentální 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" > <styl stolu = "pozadí: skyblue; margin-top: 5px"> <styl > <td ><tr > <td style = "padding: 5px" > <div style = "margin: 0px" > </body> </html>

Odsazení v html dokumentu

"Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, Sed do eiusmod dočasný incididunt ut labore et Dolore magna aliqua. "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Odstavec 1.10.32 "de Finibus Bonorum et Malorum", napsaný Cicerem v roce 45 našeho letopočtu. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabops i autamo volutta git, sedquia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt Ut enim ad minima veniam , QUIS NOSTRUM Exercitational Ullam Corporis Suscipit Laboriosam, Nisi Ut Aliquid Ex Ea Commodi Consequatur UAM Nihil Molestiale Q Consequallo Consequallu Dovolená? “ Anglický překlad 1914, H. Rackham „Musím vám však vysvětlit, jak se zrodila celá tato mylná myšlenka odsuzovat potěšení a chválit bolest, a podám vám kompletní popis systému a vysvětlím skutečné učení velkého průzkumníka. Pravda, mistr-budovatel lidského štěstí Nikdo neodmítá, nemá rád nebo se nevyhýbá potěšení samotnému, protože je potěšením, ale protože ti, kteří nevědí, jak dosáhnout potěšení, racionálně narážejí na následky, které jsou extrémně bolestivé. každý, kdo miluje nebo pronásleduje nebo touží získat bolest sám od sebe, protože je to bolest, ale protože se občas vyskytnou okolnosti, za kterých mu olej a bolest mohou přinést velké potěšení Vezměme si triviální příklad, kdo z nás někdy podniká namáhavé fyzické cvičení, kromě toho, že by z toho měl nějakou výhodu, ale kdo má právo hledat chyby na muži, který se rozhodl užívat si potěšení, které nemá žádné nepříjemné následky, nebo na člověku, který se vyhýbá bolesti, která nepřináší žádné výsledné potěšení? Odstavec 1.10.33 "de Finibus Bonorum et Malorum", napsaný Cicerem v roce 45 našeho letopočtu. "Ve Vero EOS et Accusamus et Iusto dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atti quos Dolores molestias experim Ecati Cupiditate Non Provider, Similique Sunt in Culpa Qui Officia Deserunt Mollitia Animi, ID Rerum a dolorum svobodné tempo. , cum soluta nobis est eligendi Optio Cumque nihil import quo mínus id quod maxime facere mossimus, omnis voluptas assumenda est, omnis dolor repellens et et et molestiae et et molestiae hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Anglický překlad 1914, H. Rackham „Na druhou stranu se spravedlivým rozhořčením a odporem odsuzujeme muže, kteří jsou tak oklamáni a demoralizováni kouzlem rozkoše okamžiku, tak zaslepeni touhou, že nedokážou předvídat bolest a potíže, které musí následovat a stejná vina patří těm, kteří selhávají ve své povinnosti kvůli slabosti vůle, což je stejné, jako když se zbavíme oleje a bolesti bez překážek a když nic nebrání tomu, abychom mohli dělat to, co máme nejraději, je třeba vítat každé potěšení a vyhýbat se každé bolesti, ale za určitých okolností a kvůli nárokům povinnosti nebo závazkům z podnikání se často stává, že potěšení musí Moudrý člověk se proto v těchto věcech vždy drží tohoto principu výběru: odmítá potěšení, aby si zajistil jiné větší potěšení, nebo snáší bolesti, aby se vyhnul horším bolestem."

Vítejte na mém blogu. Css (Cascading Style Sheets) poskytuje mnoho možností pro přizpůsobení vzhledu webových stránek. Dnes bych rád stručně ukázal, jak v CSS definovat výplň nahoře nebo na jakékoli jiné straně pro jakýkoli prvek.

Okraj

Okraj se nastavuje pomocí vlastnosti margin. S jeho pomocí můžete nastavit okraje na všech čtyřech stranách najednou, nebo využít další vlastnosti: margin-top, margin-left, margin-right, margin-bottom, které umožňují provést jej pouze na jednu stranu.

Okraj určuje vzdálenost, o kterou bude vybraný okraj prvku odsazen od ostatních prvků na stránce. Například záznam:

P, div( Horní okraj: 20px; )

To znamená, že všechny bloky a odstavce budou nahoře odsazeny o 20 pixelů, to znamená, že jejich horní okraj se o tuto vzdálenost posune od sousedních prvků.

Okraje lze zapisovat na každou stranu pomocí pouze jedné vlastnosti margin, do které se zapisují 4 hodnoty za sebou:

Div( okraj: 20px 10px 20px 10px; )

Výplň bude poskytnuta od horního, pravého, spodního a levého okraje. Protože v tomto případě jsou si na opačných stranách rovny, mohli bychom to také napsat takto:

Div( okraj: 20px 10px; )

První hodnota je okraj nahoře a dole a druhá je okraj po stranách.

Odsazení

Vnitřní výplň funguje jinak – neposouvá blok od ostatních prvků, ale přidává tento prostor uvnitř prvku a odsouvá obsah bloku od jeho okrajů. Je to pohodlné. Kde jste viděli webovou stránku, kde text začíná úplně vlevo nahoře v okně?

To jsem neviděl, protože weboví vývojáři vždy používají vnější a vnitřní odsazení, aby byl text co nejsnadnější. Vnitřní výplň je specifikována pomocí vlastnosti padding, ve které lze vypsat 4 hodnoty najednou oddělené mezerou pro všechny hrany, resp.

Podobně jako u okraje můžete také přidat název strany a nastavit vzdálenost pouze pro ni. Například top padding lze napsat pomocí padding-top . Obecně platí, že vlastnost padding funguje úplně stejně jako vlastnost margin.

Můžete například zadat tento kus kódu:

Blok (Šířka: 200px; Výplň: 20px; )

Jaká bude podle vás skutečná šířka našeho prvku? Zde vidíte, že je to 200 pixelů, ale výplně přidávají dalších 20 na každé straně, celkem tedy 240 pixelů. Vezměte to v úvahu při navrhování.

Chtěl bych také poznamenat, že výplň se normálně dává pouze blokovým prvkům, je lepší ji nedávat vkládaným prvkům. Okraj funguje dobře se všemi prvky.

Blokové rozložení se často používá při vytváření webových stránek nebo blogu. V důsledku toho je často nutné bloky odsadit. Z tohoto důvodu asi jak odsadit v CSS podrobně popsáno v této lekci. Pro prohlížeč je každá značka kontejnerem, který má obsah, odsazení, vnější okraje a ohraničení. V této lekci se naučíme, jak vytvořit vnitřní a vnější odsazení, a zvážit jejich hlavní parametry.

Níže uvedený obrázek jasně ukazuje parametry odsazení bloku:

Jak vidíte, odsazení lze provést ve čtyřech směrech: horní odsazení (nahoře), spodní odsazení (dolní), odsazení vlevo (vlevo) a pravé odsazení (vpravo). Jednotkami měření mohou být pixely, procenta a další jednotky CSS – zjistěte o nich více. Tento tutoriál používá pixely.

Blokové polstrování

Vlastností odpovědnou za odsazení v CSS je vycpávka. Podívejme se tedy na příklad nastavení vnitřní výplně pro blok:

padding-top: 5px; /*top padding*/ padding-left: 8px; /*left padding*/ padding-right: 8px; /*pravé padding*/ padding-bottom: 5px; /*spodní vycpávka*/

V tomto příkladu je výplň nastavena samostatně pro každou stranu bloku. Kromě toho existuje několik způsobů, jak nastavit odsazení v CSS:

okraj: 5px 8px 5px 8px; /*nahoře, vpravo, dole, vlevo okraje*/ okraj: 5px 8px 5px; /*popisuje horní, levý, pravý, spodní okraj*/ margin: 5px 8px; /*popisuje horní a dolní, pravý a levý okraj*/ margin: 7px; /*popisuje všechny vnitřní výplně 7px*/

Je snazší si zapamatovat první a poslední metodu. V prvním případě jsou odsazení umístěna ve směru hodinových ručiček (nahoře, vpravo, dole, vlevo) - v druhém případě můžeme zadat libovolné množství odsazení, odsazení na všech stranách bude stejné;

Blokovat okraje

Vlastností odpovědnou za okraje v CSS je okraj. Příklady okrajů v CSS:

margin-top: 5px; /*horní okraj*/ levý okraj: 10px; /*levý okraj*/ pravý okraj: 10px; /*pravý okraj*/ margin-bottom: 5px; /*spodní okraj*/

odsazení: 5px 10px 5px 10px; /*horní, pravý, spodní, levý okraj*/ padding: 5px 10px 5px; /*popisuje horní, levou a pravou, spodní výplň*/ výplň: 5px 10px; /*popisuje horní a spodní, pravou a levou výplň*/ výplň: 7px; /*popisuje všechny okraje 7px*/

Tedy, jak odsadit v CSS- otázka není těžká, ale velmi relevantní. Abyste lépe porozuměli výše popsaným informacím, měli byste si zapamatovat, že existují dvě vlastnosti: padding – vnitřní odsazení a margin – vnější odsazení. Také, jak již víte, existuje několik způsobů, jak nastavit odsazení, můžete je použít.

Oblíbené v kategorii: