Diseño CSS - pantalla: bloque en línea
La pantalla: valor de bloque en línea
En comparación con display: inline
, la principal diferencia es que display: inline-block
permite establecer un ancho y alto en el elemento.
Además, con
display: inline-block
, se respetan los márgenes/rellenos superior e inferior, pero con display: inline
no.
En comparación con display: block
, la principal diferencia es que display: inline-block
no agrega un salto de línea después del elemento, por lo que el elemento puede ubicarse junto a otros elementos.
El siguiente ejemplo muestra el diferente comportamiento de display: inline
, display: inline-block
y display: block
:
Ejemplo
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Uso de bloques en línea para crear enlaces de navegación
Un uso común para display: inline-block
es mostrar los elementos de la lista horizontalmente en lugar de verticalmente. El siguiente ejemplo crea enlaces de navegación horizontales:
Ejemplo
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}