V tomto článku budeme diskutovať o vlastnostiach inline-block prvkov. Je to veľmi užitočná vlastnosť CSS. Môžeme ho aplikovať na rôzne značky. Je súčasťou vlastnosti CSS display.
celé číslo na reťazec
Použitie:
display: inline-block
Použitím vyššie uvedenej vlastnosti sa prvok bude správať ako vložený a blokovaný pre svoje podradené prvky. Poďme pochopiť vložené a blokové prvky.
Vložené prvky
Prvky, ktoré nezačínajú na novom riadku, sú známe ako vložené prvky. Sú spojené ako súčasť hlavného textu a nie ako samostatná akcia. Tieto prvky zaberajú len potrebný priestor. Medzery vľavo a vpravo je možné pridať k vloženému prvku, ale nemožno pridať výšku k hornému alebo dolnému odsadeniu alebo okraju vloženého prvku.
Príklad vložených prvkov:
Prí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ýkon:
operačné systémy mac
Blokové prvky
Prvky, ktoré začínajú na novom riadku, sú známe ako blokové prvky. Prvok bloku nadobudne celú šírku dostupnú pre tento obsah. Na rozdiel od inline pre tieto prvky existuje horný a dolný okraj. Prvky na úrovni bloku sa môžu objaviť iba vo vnútri značky body. Prvky na úrovni bloku vytvárajú väčšiu štruktúru ako vložené prvky.
Príklad prvkov bloku:
,
int v reťazci
Prí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ýkon:
Vložené prvky bloku
Zobrazená hodnota inline-block funguje podobne ako inline s jednou výnimkou: výšku a šírku tohto prvku je možné upraviť.
Príklad:
názov mesta USA
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ýkon:
Nižšie je uvedený výstupný súbor so všetkými prvkami na jednej stránke:
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>