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.
dígito romano del 1 al 100
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:
expresiones regulares en java
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:
,
¿Qué significa google?
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:
delimitador java
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>