Elements de bloc en línia
En aquest article, parlarem de la propietat dels elements de bloc en línia. És una propietat molt útil de CSS. Ho podem aplicar a diverses etiquetes. Forma part de la propietat de visualització CSS.
Ús:
display: inline-block
En aplicar la propietat anterior, l'element es comportarà com a bloc i en línia per als seus elements fills. Entenem els elements en línia i de bloc.
Elements en línia
Els elements que no comencen en una línia nova es coneixen com a elements en línia. Es combinen com a part del text principal i no com a acció separada. Aquests elements ocupen només l'espai necessari. Els espais a l'esquerra i a la dreta es poden afegir a un element en línia, però no es pot afegir alçada al farciment superior o inferior o al marge d'un element en línia.
Exemple d'elements en línia:
Exemple:
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 Sortida:
Elements del bloc
Els elements que comencen en una nova línia es coneixen com a elements de bloc. Un element de bloc adquireix tota l'amplada disponible per a aquest contingut. A diferència d'inline, hi ha un marge superior i inferior per a aquests elements. Els elements a nivell de bloc només poden aparèixer dins de l'etiqueta del cos. Els elements a nivell de bloc creen una estructura més gran que els elements en línia.
Exemple d'elements de bloc:
,
Exemple:
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> Sortida:
Elements de bloc en línia
El valor de visualització d'inline-block funciona de manera similar a inline amb una excepció: l'alçada i l'amplada d'aquest element es poden modificar.
Exemple:
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> Sortida:
A continuació es mostra el fitxer de sortida que utilitza tots els elements d'una pàgina:
Codi
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> 
