V tomto článku budeme diskutovat o vlastnosti prvků inline-block. Je to velmi užitečná vlastnost CSS. Můžeme to aplikovat na různé značky. Je součástí vlastnosti CSS display.

Používání:

 display: inline-block  

Použitím výše uvedené vlastnosti se prvek bude chovat jako vložený a blokovaný pro své podřízené prvky. Pojďme pochopit prvky inline a block.

Vložené prvky

Prvky, které nezačínají na novém řádku, se nazývají vložené prvky. Jsou spojeny jako součást hlavního textu, nikoli jako samostatná akce. Tyto prvky zabírají pouze požadovaný prostor. Mezery vlevo a vpravo lze přidat k vloženému prvku, ale nelze přidat výšku k hornímu nebo dolnímu odsazení nebo okraji vloženého prvku.

Příklad vložených prvků:

, , , <strong> , <a href="/html-image"><img></a> , , <a href="/html-button-tag"></a> , , , , are some of the inline tags.</strong>

Příklad:

 Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag  

Výstup:

Blokové prvky

Prvky, které začínají na novém řádku, se nazývají blokové prvky. Prvek bloku získá celou šířku dostupnou pro tento obsah. Na rozdíl od inline existuje pro tyto prvky horní a dolní okraj. Prvky na úrovni bloku se mohou objevit pouze uvnitř značky body. Prvky na úrovni bloku vytvářejí větší strukturu než vložené prvky.

Příklad prvků bloku:

,

,

, , , , , jsou některé z vložených značek.

Příklad:

 Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph&apos;s parent element.</p>  

Výstup:

Vložené prvky bloku

Zobrazená hodnota inline-block funguje podobně jako inline s jednou výjimkou: výšku a šířku tohoto prvku lze upravit.

Příklad:

 span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span>  

Výstup:

Níže je výstupní soubor využívající všechny prvky na jedné stránce:

Kód

 span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>