in

Diseño CSS: 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.

También con
display: inline-block
, se respetan los márgenes / rellenos superior e inferior, pero con display: inline no son.

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 sentarse junto a otros elementos.

El siguiente ejemplo muestra el comportamiento diferente de display: inline, display: inline-block
y display: block:

Ejemplo

span.a {
pantalla: en línea; / * el valor predeterminado para el intervalo * /

ancho: 100px;
altura: 100px;

relleno: 5px;
borde: 1px azul sólido;
color de fondo: amarillo;
}

span.b {
pantalla: bloque en línea;
ancho: 100px;
altura: 100px;
relleno: 5px;
borde: 1px azul sólido;
color de fondo: amarillo;
}

span.c {
bloqueo de pantalla;
ancho: 100px;
altura: 100px;
relleno: 5px;

borde: 1px azul sólido;
color de fondo: amarillo;
}

Inténtalo tú mismo »


Uso de bloques en línea para crear vínculos 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 {
color de fondo: amarillo;
tipo de estilo de lista: ninguno;
alineación de texto: centro;
acolchado: 0;
margen: 0;
}

.nav li {
pantalla: bloque en línea;
tamaño de fuente: 20px;
relleno: 20px;
}

Inténtalo tú mismo »

.after-box {
clear: left;
}

Try it Yourself »

The same effect can be achieved by using the inline-block value of the display property (notice that no clear is needed):

Example

.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
Try it Yourself »
-->