Diferencias Clave: display: block vs. inline vs. inline-block
Imagina que estás organizando tu escritorio. Algunos objetos, como tu monitor, ocupan su propio espacio y no dejas que nada se ponga a su lado. Otros, como un lápiz, pueden estar junto a otros lápices sin problemas. En CSS, la propiedad display es la que le dice al navegador cómo debe "organizar" cada elemento en la página.
Entender la diferencia entre block, inline y inline-block es una de las habilidades más fundamentales en CSS. Es la clave para pasar de crear páginas que "más o menos se ven bien" a diseñar layouts precisos y profesionales.
display: block (Los Ladrillos 🧱)
Piensa en un elemento block como un ladrillo en una pared. Siempre empieza en una línea nueva y ocupa todo el ancho disponible, empujando a los demás elementos hacia abajo. Es el rey del espacio.
- Siempre empieza en una nueva línea.
- Ocupa el 100% del ancho de su contenedor por defecto.
- Puedes definirle un
width,height,marginypaddingsin problemas.
💡 Ejemplos Comunes: Etiquetas como <div>, <p>, <h1> a <h6>, <ul>, y <li> son block por naturaleza.
Código de ejemplo para display: block
.caja-bloque {
display: block;
width: 80%;
height: 100px;
background-color: #e7f3fe;
margin: 10px;
padding: 15px;
}display: inline (Las Palabras ✍️)
Un elemento inline es como una palabra dentro de una frase. Se acomoda junto a otros elementos en la misma línea y solo ocupa el espacio que su contenido necesita. Es modesto y colaborativo.
- No empieza en una línea nueva.
- Ignora por completo las propiedades
widthyheight. - Solo respeta
marginypaddingen sentido horizontal (izquierda y derecha).
💡 Ejemplos Comunes: Etiquetas como <span>, <a>, <strong>, <em>, y <img> son inline por naturaleza.
Código de ejemplo para display: inline
Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!