Block vs. Inline
Esto se debe a los diferentes comportamientos display: Bloque o inline. Veamos la diferencia con un breve ejemplo. Sin ningún tipo de CSS, creo una plantilla HTML con las etiquetas <p> y <span>:
<body>
<p>I'm a paragraph</p>
<p>I'm a paragraph too</p>
<span>I'm a word</span>
<span>I'm a word too.</span>
</body>
¿Puedes ver la diferencia? Cada etiqueta <p> comienza con una nueva línea aunque haya espacio suficiente. Span, sin embargo, se muestra una al lado de la otra.
Cada elemento HTML tiene un valor de visualización por defecto. – W3
Por defecto, los elementos HTML tienen un comportamiento de visualización como bloque o en línea. Los elementos que comienzan cada uno con una nueva línea (etiquetas <p> en este ejemplo) se denominan elementos a nivel de bloque, y los otros (<span>) que pueden colocarse uno al lado del otro son elementos en línea.
Hay algunas características diferentes entre los elementos de bloque y los elementos inline:
Elementos a nivel de bloque
- Toma el full-anchura (100% de anchura) por defecto
- Cada uno se muestra en una nueva línea
- Se pueden establecer las propiedades de altura de &
- Pueden contener otros elementos de bloque o inline
Dado que las etiquetas <p> son elementos de nivel de bloque, se pueden establecer las propiedades de anchura & de altura:
p {
height: 100px;
width: 100px;
background: red;
color: white;
}
Si no se declarara ningún ancho aquí, entonces el ancho por defecto de <p> sería del 100%. Sin embargo, declaré un ancho de 100px y el siguiente elemento <p> sigue comenzando con una nueva línea:
Elementos en línea
- Ocupan sólo el espacio que necesitan
- Se muestran uno al lado del otro
- No aceptan propiedades de anchura o altura, y margen superior-inferior
- Puede ser padre de otros elementos en línea
Podemos cambiar el comportamiento de visualización de los elementos. Así que vamos a cambiar el comportamiento de visualización de la etiqueta <p> a inline:
p {
height: 100px;
width: 100px;
background: red;
color: white;
display: inline;
}
Dado que nuestra etiqueta <p> es ahora un elemento en línea, se colocarán uno al lado del otro y las propiedades de ancho & de altura ya no tienen efecto:
Ver una lista completa de etiquetas HTML como elementos inline de bloque &.