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.
pole c řetězec
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ů:
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:
listonoš
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:
,
věk peta Davidsona
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's parent element.</p> Výstup:
řetězec.formát
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>