He encontrado varias dudas acerca de la diferencia a la hora de trabajar con estos tipos de elementos en CSS.
Entonces, ¿Cuáles son las diferencias entre estos elementos?
Para explicarlo de manera sencilla, ciertas etiquetas HTML no se ven afectadas por el flujo de otros elementos, limitándose solamente a su uso natural.
Los elementos en línea definidos por HTML son los siguientes: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
Un ejemplo de estas etiquetas podría ser <a>
, <em>
y quizás la más útil de todas <span>
, a todos estos elementos se les llama "inline", porque por defecto llevan su display: inline
, sin necesidad de especificarlo en un documento CSS.
Imaginemos que tenemos el siguiente panorama:
.box {
background-color: tomato;
border: 1px solid black;
width: 100px;
height: 100px;
padding: 5px;
margin: 50px 10px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam tortor turpis, convallis eget suscipit vel, eleifend
tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam tortor turpis, convallis eget suscipit vel, eleifend
tincidunt orci. Quisque ac.</p>
Cómo vemos, todas las Cajas X tienen la propiedad inline (a pesar de no estar definido en el CSS) y se alinean unas a otras pero no se respetan anchos, ni altos y mucho menos margenes verticales
Por el contrario, existen los elementos en bloque, los cuales no se mezclan con el resto de los elementos, mostrándose en "líneas" independientes.
Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.
Volviendo al mismo panorama pero cambiando los elementos inline por elementos de bloque, tendremos el siguiente resultado:
.box {
background-color: tomato;
border: 1px solid black;
width: 100px;
height: 100px;
padding: 5px;
margin: 50px 10px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam tortor turpis, convallis eget suscipit vel, eleifend
tincidunt orci. Quisque ac.</p>
<div class="box">CAJA 1</div>
<h6 class="box">CAJA 2</h6>
<div class="box">CAJA 3</div>
<pre class="box">CAJA 4</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam tortor turpis, convallis eget suscipit vel, eleifend
tincidunt orci. Quisque ac.</p>
Como lo comente, ahora los elementos bloque se muestran en "líneas" independientes pero sobre todo, ya respetan anchos, altos y margenes verticales.
Acabamos de ver los elementos block y los elementos inline, ahora pues, toca continuar con el elemento inline-block.
Este elemento es una mezcla de ambos, pudiéndose alinear pero además respeta altos, anchos y margenes verticales.
.box {
display: inline-block;
background-color: tomato;
border: 1px solid black;
width: 100px;
height: 100px;
padding: 5px;
margin: 50px 10px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam tortor turpis, convallis eget suscipit vel, eleifend
tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam tortor turpis, convallis eget suscipit vel, eleifend
tincidunt orci. Quisque ac.</p>