Který styl zobrazení CSS je pro vás nejlepší

Úvod do stylů CSS a vlastnosti display

Kaskádové styly (CSS) představují jazyk pro definování vzhledu webových stránek. Umožňují tvůrcům webů řídit, jak se dokumenty HTML a XML zobrazují v prohlížeči. CSS je klíčové pro úpravu vizuální stránky webových prvků, včetně jejich stylů, rozvržení a celkového designu.

Díky CSS mohou vývojáři měnit fonty, barvy, pozadí, přidávat efekty při najetí myší a optimalizovat stránky pro různá zařízení a rozlišení. CSS také zjednodušuje proces tvorby webových stránek s konzistentním stylem, což je důležité pro zachování jednotného vzhledu značky.

Když prohlížeč načte HTML dokument, prvky se standardně zobrazují v pořadí, v jakém jsou uvedeny ve zdrojovém kódu. Toto se nazývá normální tok dokumentu.

V rámci normálního toku, pokud nerozhodneme jinak, můžeme prvky HTML rozdělit do dvou hlavních kategorií podle toho, jak se zobrazují na stránce.

Těmito kategoriemi jsou prvky blokové a prvky inline. Podívejme se na ně blíže, abychom pochopili, jak prvky HTML fungují.

Pro začátek si vytvořte novou složku, do které vložte soubory index.html a app.css. Můžete si je pojmenovat dle libosti, ale zachovejte koncovky .html a .css.

Nyní otevřete HTML soubor a vložte do něj následující kód:

<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vlastnost Display</title>
  <link rel="stylesheet" href="app.css">
</head>
<body>
</body>
</html>

Tento kód definuje základní HTML šablonu, která slouží jako základ pro tvorbu webových stránek. Je také propojena se souborem app.css, což nám umožní definovat vizuální vlastnosti HTML prvků pomocí CSS.

Veškerý HTML kód, který budeme dále uvádět, vkládejte do tagů <body></body>. Váš soubor CSS bude pro začátek prázdný.

Blokové prvky

Blokové prvky zabírají celou dostupnou šířku a automaticky vytvářejí nový řádek před i za sebou. Vytvářejí tak na stránce samostatné bloky, jejichž výška se rovná výšce jejich obsahu.

Mezi typické blokové prvky patří například <div>, <p> (odstavec), <ul> (nečíslovaný seznam), <ol> (číslovaný seznam), <li> (položka seznamu) a nadpisy <h1>, <h2>, <h3> a další.

Zde je příklad:

<body>
  <h1>MujWeb.cz</h1>
  <p>MujWeb.cz je webová stránka, která vytváří kvalitní obsah o
    technologiích, obchodu a financích. Naším cílem je pomoci
    lidem a firmám růst. Mezi naše témata patří:</p>
  <p>Mezi témata, kterým se MujWeb.cz věnuje, patří:</p>
  <ul>
    <li>Programování</li>
    <li>Kybernetická bezpečnost</li>
    <li>Digitální forenzika</li>
    <li>Produktivita</li>
    <li>Hraní</li>
  </ul>
</body>

Když tento HTML kód otevřete v prohlížeči, zobrazí se následujícím způsobem:

Všimněte si, že nadpis <h1> „MujWeb.cz“ zabírá celou šířku a následující odstavce jsou umístěny na nových řádcích. Právě takto se chovají blokové prvky.

Inline prvky

Inline prvky se umisťují vedle sebe na stejné linii a zabírají pouze takovou šířku, jaká je nutná pro zobrazení jejich obsahu. Nezačínají na novém řádku a netlačí ostatní prvky na nový řádek.

Inline prvky nenarušují tok obsahu. Plynou v rámci textu, aniž by vytvářely oddělené bloky. Příklady inline prvků zahrnují <span>, <a> (odkaz), <input> (vstup) a <time>.

Podívejme se na následující kód, který upravuje předchozí příklad tak, aby obsahoval inline prvky:

<body>
  <h1>MujWeb.cz</h1>
  <p>MujWeb.cz <span>JSEM SPAN PRVEK</span> je webová stránka, která vytváří kvalitní obsah o
    technologiích, obchodu a financích. Naším cílem je pomoci
    lidem a firmám růst. Mezi <a href="https://wilku.top/which-css-display-style-is-best-for-you/etechblog.cz.com">témata</a> patří:</p>
  <p>Mezi témata, kterým se MujWeb.cz věnuje, patří:</p>
  <ul>
    <li>Programování</li>
    <li>Kybernetická bezpečnost</li>
    <li>Digitální forenzika</li>
    <li>Produktivita</li>
    <li>Hraní</li>
  </ul>
</body>

Výsledný vzhled stránky je následující:

Vidíte, jak <span> prvek bezproblémově zapadá do stejného řádku s okolním textem, aniž by narušil tok obsahu. Takto fungují inline prvky.

Vlastnost display

Jak jsme viděli, HTML prvky mají implicitně nastavené chování, buď jako blokové, nebo inline. To ovlivňuje, jak se zobrazují a jak interagují s ostatními prvky v rámci toku HTML dokumentu.

Jako webový vývojář můžete potřebovat toto implicitní chování změnit. Například, blokový prvek by se měl chovat jako inline, nebo naopak. Například byste mohli chtít, aby <h1>, který je implicitně blokový, se choval jako inline, nebo aby <span>, který je inline, se choval jako blok.

Pro změnu implicitního chování prvků používáme CSS vlastnost `display`. Tato vlastnost nám umožňuje definovat, zda se s prvkem má zacházet jako s inline, nebo blokovým prvkem.

Použitím `display` můžete blokový prvek změnit na inline a naopak.

Pro praktickou ukázku, vložte následující kód do vašeho CSS souboru a obnovte HTML stránku v prohlížeči.

h1 {
  display: inline;
  background-color: paleturquoise;
}

p {
  display: inline;
  background-color: palevioletred;
}

span {
  display: block;
  background-color: darkolivegreen;
}

ul {
  background-color: yellow;
}

Výše uvedený kód pomocí vlastnosti `display` změní prvky <h1> a <p>, které jsou implicitně blokové, na inline prvky. Dále změní <span>, které je inline, na blokový prvek. Prvkům jsou také přidány různé barvy pozadí pro lepší rozlišení. Finální HTML dokument po těchto změnách vypadá takto:

Můžete vidět, že <h1> prvek, který dříve zabíral celý blok, nyní sdílí řádek s prvkem <p>, který také zabíral celý blok. <span> prvek s olivově zeleným pozadím nyní zabírá celý blok, ačkoli jeho implicitní chování je umístit se do stejného řádku s ostatními prvky.

Důležitý rozdíl mezi inline a blokovými prvky

Kromě jejich vlivu na tok obsahu existuje mezi inline a blokovými prvky ještě další zásadní rozdíl.

U inline prvků jsou vlastnosti `width` a `height` ignorovány. To znamená, že nemůžete změnit šířku ani výšku inline prvku.

Kromě toho, pokud u inline prvku nastavíte okraj, bude aplikován pouze v horizontálním směru. Vertikální okraje jsou ignorovány.

Pokud k inline prvku přidáte vnitřní odsazení, bude respektováno pouze vodorovně. I když se odsazení vizuálně projeví i vertikálně, ostatní prvky jej nebudou brát v potaz. Odsazení tak nebude narušovat obsah nad nebo pod inline prvkem.

Pro demonstraci odstraňte nebo zakomentujte veškerý kód z CSS souboru a vložte následující:

span {
  height: 500px;
  width: 400px;
  margin: 20px;
  background-color: darkolivegreen;
}

a {
  padding: 20px;
  border: 1px solid black;
}

Výsledný vzhled stránky je následující:

Vidíme, že ačkoli měl <span> prvek definovány vlastnosti `height` a `width`, jeho výška a šířka se nezměnily. Okraj, který byl přidaný kolem <span> se aplikoval pouze vodorovně.

U prvku <a> platí, že odsazení ovlivňuje pouze obsah v řádku, ve kterém se prvek nachází. Prvky v řádku nad prvkem <a> nejsou odsazením nijak ovlivněny.

U blokových prvků jsou vlastnosti šířky a výšky respektovány. Okraje a odsazení se aplikují v obou směrech.

Pro demonstraci vložte do stávajícího CSS souboru následující kód:

h1 {
  height: 50px;
  width: 200px;
  border: 1px solid black;
  padding: 50px;
  margin: 35px;
  background-color: aquamarine;
}

Výsledný vzhled HTML je následující:

Vidíme, že šířka, výška, okraje a odsazení, které byly definovány pro prvek <h1>, byly respektovány ve všech směrech.

Z rozdílů v aplikaci šířky, výšky, okrajů a odsazení na inline a blokové prvky vyplývá třetí hodnota vlastnosti `display`, kterou lze použít ke změně způsobu zobrazení prvků. Jedná se o `inline-block`.

Inline-Block prvky

Inline-block prvek se chová jako inline prvek, to znamená, že se umisťuje vedle ostatních prvků v jednom řádku, aniž by je posouval na další řádek. Na rozdíl od inline prvků, u inline-block prvků se respektují šířka, výška, okraje a odsazení.

Možnost zobrazení `inline-block` použijete, když chcete, aby se prvek choval jako inline prvek, ale přitom umožňoval nastavit jeho šířku, výšku, okraje a odsazení, jako by to byl blokový prvek. To znamená, že vlastnosti budou respektovány ve všech směrech.

Pro demonstraci odstraňte nebo zakomentujte veškerý kód z CSS souboru a vložte následující kód:

span {
  display: inline-block;
  background-color: darkolivegreen;
  height: 50px;
  width: 200px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

Výše uvedený CSS kód nastavuje vlastnost `display` u prvku <span> na `inline-block`. <span> je implicitně inline prvek. Kód poté definuje šířku, výšku, okraj a odsazení prvku <span>. Výsledek je následující:

Vidíme, že šířka, výška, okraj a odsazení, které byly přidány k prvku <span>, byly respektovány a prvek <span> se stále zobrazuje jako inline prvek.

Takto se chovají `inline-block` prvky. Dříve jsme se pokoušeli definovat stejné vlastnosti u prvku <span>, ale nebyly respektovány, protože <span> v té době byl inline prvek.

Inline vs. Inline-Block

Rozdíly mezi `inline` a `inline-block` prvky shrnuje následující tabulka:

Charakteristika	Inline	Inline-Block
Chování při zobrazení	Ovlivněno vlastností line-height. Respektuje horizontální okraje a odsazení.	Respektuje vlastnosti horizontálních okrajů a odsazení.
Šířka a výška	Ignoruje vlastnosti šířky a výšky.	Respektuje vlastnosti šířky a výšky.
Okraje a odsazení	Ignoruje vertikální okraje a odsazení.	Respektuje okraje a odsazení ve všech směrech.
Tok v obsahu	Nezahajuje nový řádek.	Nezahajuje nový řádek.
Line-height	Ovlivněna vlastností line-height.	Ovlivněna vlastností line-height.
Horizontální rozložení	Ignoruje vlastnosti zarovnání textu.	Respektuje vlastnosti zarovnání textu.

Jak vidíte, `inline` a `inline-block` prvky se liší v tom, jak reagují na různé CSS vlastnosti.

Kdy použít Inline a Inline-Block

Jako vývojář použijte `inline` možnost zobrazení, když chcete, aby váš HTML obsah plynul v jednom řádku, bez zalamování. Například při práci s textovými prvky jako <a>, <strong> a <span> je logické použít `inline`, což je jejich implicitní chování.

Na druhou stranu, použijte `inline-block`, když chcete, aby se prvek choval jako blokový prvek, ale zároveň plynul v textu bez zalamování. Použijte `inline-block`, když chcete ovládat šířku, výšku, okraje a odsazení prvku, ale zároveň chcete, aby zůstal součástí inline toku obsahu.

Závěr

CSS nabízí možnosti `inline`, `block` a `inline-block` zobrazení, které lze použít ke změně a ovládání způsobu, jakým se prvky zobrazují na webové stránce. Vlastnost `display` nám umožňuje definovat, zda prvek bude zobrazen jako `inline`, `block`, nebo `inline-block`.

Jako webový vývojář je klíčové porozumět rozdílu mezi těmito typy zobrazení. Seznamte se s nimi a začněte používat vlastnost `display` ve svých projektech, abyste získali více zkušeností.

Pro další inspiraci můžete také prozkoumat generátory CSS mřížky pro vizuální vytváření složitých rozvržení.