display: inline-block;
Libovolný element se začne chovat jako řádkový s některými vlastnostmi blokového-
Řadí se za sebou, ale lze mu nastavit šířku, výšku a všechny hodnoty margin
.
p {
display: inline-block;
width: 30%;
background-color: yellow;
margin: 10%;
}
<p>Jsem blokový prvek, ale chovám se jako řádkově blokový.</p><p>To já taky, nic si z toho nedělej.</p><p>Výchova není co bývala.</p>
Narodil jsem jako blokový prvek, ale pak ze mě udělali řádkově blokový.
To já taky, nic si z toho nedělej.
Výchova není co bývala.
Všimni si, že margin
je už stejný na šířku i na výšku pixelů, v tomto případě nedochází ke slučování.
Také není náhoda, že mezi prvky není ani jedna mezera, protože jinak by se při menších velikostech marginů zobrazila a výsledek by vypadal jinak. Jde to vyřešit i v CSS, ale ne úplně snadno a teď si tím nemusíme zabývat. Jak řešit layouty (rozložení prvků na stránce) probereme na poslední hodině.