Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=6e85cc55-84ac-4b33-99d9-e7e895806229

¿Qué diferencias hay entre display:block, inline e inline-block en CSS?

CSS-DisplayUna duda típica a la hora de trabajar con HTML y CSS es tener claras las diferencias que existen entre elementos de bloque y elementos en línea, así que vamos a intentar arrojar un poco de luz sobre este tema.

Elementos en línea

Para explicarlo de manera sencilla, y simplificando, ciertas etiquetas HTML no afectan en absoluto al flujo de los demás elementos, limitándose a marcar ciertos fragmentos con una determinada semántica y dejando que el texto y otros elementos contiguos sigan fluyendo en la misma línea, colocándose a ambos lados de dicho elemento.

Ejemplos de estas etiquetas son: <a>, <em>,<del>... y quizá la más útil de todas: la etiqueta <span>, que se usa para envolver elementos en-línea para darles estilo sin cambiar su comportamiento. A estos elementos HTML se les llama elementos de línea o, incluso más a menudo, por su denominación en inglés: elementos "inline".

Por ejemplo, si tenemos el siguiente estilo CSS:

.caja {
	background-color: yellow;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}

Y un código HTML tan sencillo como este:

<p>Lorem ipsum dolor...</p>
<span class="caja">CAJA 1</span>
<span class="caja">CAJA 2</span>
<span class="caja">CAJA 3</span>
<p>Lorem ipsum dolor...</p>

Lo que obtenemos en el navegador con este código es esta representación:

bloques-block

Como vemos las cajas tienen un estilo in-line porque son spans, se alinean unas a continuación de otras, pero no se respetan los anchos, los altos ni los márgenes verticales de los elementos.

Elementos de bloque

Por el contrario, ciertas etiquetas se renderizan en el navegador en líneas independientes, no mezcladas con el resto del texto.  Ejemplos de estas etiquetas son los encabezados (<h1> hasta <h6>), las citas en bloque (<blockquote>), por supuesto los párrafos (<p>), y quizá la más conocida de todas que es la etiqueta <div> usada normalmente para envolver a otros elementos. A estos elementos se les denomina elementos de bloque.

Siguiendo con el mismo ejemplo anterior, si simplemente sustituimos los <span> por elementos <div>, ahora las cajas son elementos de bloque, y se renderizarán de la siguiente manera:

bloques-block

Es decir, ahora los elementos no fluyen como si fueran texto, sino que por defecto se renderizan en líneas independientes. Además, los elementos de bloque respetan los anchos y altos y los márgenes verticales, tal y como se observa en la figura anterior (no se ha cambiado nada más que el tipo de etiqueta: los estilos CSS son exactamente los mismos).

Cambio de tipo de visualización y un tercer tipo intermedio

Bien, aparte de este comportamiento por defecto, es posible cambiar el modo en el que se visualiza/renderiza cualquier elemento HTML de una página usando la propiedad CSS llamada display.

Esta propiedad puede tomar muchos valores diferentes, pero los más comunes son estos tres:

  • block: hace que el comportamiento del elemento sea como un bloque.
  • inline: el elemento se renderizará en línea con otros elementos.
  • inline-block: el elemento tendrá un comportamiento mezcla entre los dos anteriores, que ahora voy a describir.

Así por ejemplo, aunque tengamos una etiqueta span que se renderiza en línea por defecto, si le aplicamos la propiedad display:block; se renderizará como un bloque, es decir, sería exactamente igual que si hubiésemos puesto un <div>.

El tercer valor de la lista anterior es muy interesante ya que permite obtener un comportamiento intermedio entre los otros dos. Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales. Son lo mejor de los dos mundos.

Así, si por ejemplo redefinimos la etiqueta <span> de esta manera y volvemos a refrescar la página del principio, lo que veríamos por pantalla es esto:

bloques-inline-block

Fíjate en que ahora se respetan todas las propiedades (ancho, alto y margen vertical), pero los elementos siguen estando en la misma línea.

Cambio automático de modo

Una cuestión importante y que muchas veces se nos pasa por alto es que un elemento en línea puede cambiar de manera automática y pasar a ser un elemento de bloque en ciertas circunstancias, sin que nos demos cuenta. En concreto si lo flotamos con la propiedad CSS llamada float, aunque el elemento sea inline (incluso aunque lo indiquemos explícitamente con un display:inline !important;) el elemento adquirirá automáticamente el estilo de bloque para poder aplicar la flotación, que tiene preferencia. Esto es lo que indica el estándar específicamente.

¡Espero que lo encuentres útil!

Contenido Extra

Hemos grabado un completo vídeo mostrando todo lo explicado de manera visual, en un navegador con código real, de modo que lo puedas ver con mayor detalle. Puedes verlo aquí.

Fecha de publicación:
José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web

No te pierdas nada, recibe lo mejor en tu email

Si te ha gustado este art­ículo, únete a miles de desarrolladores que ya reciben cada mes nuestro boletí­n por email. No te pierdas los mejores trucos, noticias y frikadas.

Enviamos poco, pero bueno. Palabra de desarrollador.

Suscríbete aquí­

Sí­guenos también en:

Telegram LinkedIn YouTube
La mejor formación online para desarrolladores como tú

Comentarios (8) -

Hola José Manuel,
El motivo de mi pregunta, es saber porque se forma una columna en mi web cuando utilizo
.hppforward, .hppback {
    display:inline-block;
    float:left;
}
Este código me lo aconsejaron porque el carrusel de  la plantilla no se ajustaba correctamete, pero por consiguiente se crea una columna blanca. He tenido que eliminar el código, pero se desajusta solamente las flechas del carrusel. Me gustaría conocer el motivo y la solución. Muchas gracias.
Un cordial saludo.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Michael:

Pues con los datos que me das poco te puedo decir. Ese par de clases no sé a qué se aplican ni qué "framework" CSS estás usando, si es que usas alguno.

Lo que están haciendo esos selectores es aplicar el estilo de visualización in-line-block (te refiero al post para ver su significado) a los elementos que lleven esas clases aplicadas, además de flotarlos a la izquierda. Supongo que si los elementos a los que se le aplica tienen un ancho fijo y están metidos dentro de otro elemento en el que no caben, los pondrá unos encima de otros al flotarlos y por eso te aparece una columna.

Lo que te consejo modestamente es que, si quieres aprender en serio HTML y CSS y comprender por qué te funcionan estas cosas y aprender a hacerlas lo mejor posible por ti mismo, te apuntes a mi curso de "Creación Profesional de páginas web con HTML y CSS": /catalogo/Product-Creaci%C3%B3n-profesional-de-p%C3%A1ginas-web-con-HTML5-y-CSS3_185.aspx

Con él dominarás a fondo todas estas cuestiones y muchas más.

Saludos!

Responder

Hola José Manuel,
Muchas gracia por tu pronta respuesta y agradecer la invitación para realizar el curso.
Espero más adelante apuntarme pero las circunstancias que tengo no me permiten dedicar mucho tiempo a realizar estos cursos, pero no descarto realizarlo en un futuro cercano.
Un cordial saludo !

Responder

Sabes no puedo que me aparezca con el comando de display:block, hay otra forma...


Gracias.

Responder

Y para colocarle a cada caja su respetivo titulo en la parte inferior, como seria profe.?

Responder

solamente aplica la h2 en la estructura justo después de cada span o cada div .... aunque no es una practica común puedes enlazarlos atravez de el atributo div

Responder

Siempre son dos herramientas que se suelen confundir, bien desarrollado el artículo

Responder

Perfectamente explicado e ilustrado. Muchas gracias.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.