Elementos de bloque en línea
En este artículo, analizaremos la propiedad de los elementos de bloque en línea. Es una propiedad muy útil de CSS. Podemos aplicarlo a varias etiquetas. Es parte de la propiedad de visualización de CSS.
Uso:
display: inline-block
Al aplicar la propiedad anterior, el elemento se comportará como en línea y como bloque para sus elementos secundarios. Entendamos los elementos en línea y de bloque.
Elementos en línea
Los elementos que no comienzan en una nueva línea se conocen como elementos en línea. Se combinan como parte del texto principal y no como una acción separada. Estos elementos ocupan sólo el espacio requerido. Se pueden agregar espacios a la izquierda y a la derecha a un elemento en línea, pero no se puede agregar altura al margen o relleno superior o inferior de un elemento en línea.
Ejemplo de elementos en línea:
Ejemplo:
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 Producción:
Elementos de bloque
Los elementos que comienzan en una nueva línea se conocen como elementos de bloque. Un elemento de bloque adquiere todo el ancho disponible para ese contenido. A diferencia de lo que ocurre en línea, existe un margen superior e inferior para estos elementos. Los elementos a nivel de bloque solo pueden aparecer dentro de la etiqueta del cuerpo. Los elementos a nivel de bloque crean una estructura más grande que los elementos en línea.
Ejemplo de elementos de bloque:
,
Ejemplo:
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> Producción:
Elementos de bloque en línea
El valor de visualización de inline-block funciona de manera similar a inline con una excepción: la altura y el ancho de ese elemento se vuelven modificables.
Ejemplo:
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> Producción:
A continuación se muestra el archivo de salida que utiliza todos los elementos en una página:
Código
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> 
