Propiedades de visualización de CSS: block, inline e inline-block – y cómo diferenciarlas
Los navegadores web tratan cada elemento como un tipo de caja. Sin embargo, CSS tiene dos tipos diferentes de cajas: block e inline.
Un elemento block siempre comienza en una nueva línea, y llena el espacio horizontal a la izquierda y a la derecha en la página web. Puedes añadir márgenes y relleno en los cuatro lados de cualquier elemento de bloque: arriba, derecha, izquierda y abajo.
Algunos ejemplos de elementos de bloque son las etiquetas <div> y <p>. Como se muestra a continuación, también he añadido relleno verde en los cuatro lados de cada elemento del bloque.
Los elementos en línea no comienzan en una nueva línea, aparecen en la misma línea que el contenido y las etiquetas que están a su lado. Algunos ejemplos de elementos inline son <span><strong>, y <img> etiquetas.
Cuando se trata de márgenes y relleno, los navegadores tratan los elementos en línea de forma diferente. Puedes añadir espacio a la izquierda y a la derecha en un elemento en línea, pero no puedes añadir altura al relleno o margen superior o inferior de un elemento en línea.
Los elementos en línea pueden aparecer realmente dentro de elementos de bloque, como se muestra a continuación. He añadido relleno blanco en el lado izquierdo y derecho de cada elemento en línea.
Inline-Block
Los elementos inline-block son similares a los elementos inline, excepto que pueden tener relleno y márgenes añadidos en los cuatro lados. Tendrás que declarar display: inline-block en tu código CSS.
Un uso común para utilizar inline-block es para crear enlaces de navegación en horizontal, como se muestra a continuación. He creado un menú de navegación horizontal con un color de fondo naranja.
También hay muchas otras propiedades de visualización, que puedes consultar a través de la documentación de MDN.
D.