5

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?

1 respuesta 1

11

Resumen

  • inline: Muestra en la misma línea (respetando el flujo) todos los elementos y no acepta las propiedades width, height ni margenes verticales.
  • block: Muestra los elementos en líneas independientes y acepta las propiedades width, height y margenes verticales.
  • inline-block: Su comportamiento es una mezcla entre los dos anteriores, se muestran en la misma línea (respetando el flujo) todos los elementos y además, acepta las propiedades width, height y margenes verticales.

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.

Elementos en línea o inline

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


Elementos en bloque o block

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.


Elemento bloque en línea o inline-block

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.