display: inline-block de CSS

display: inline-block

Con display: inline En comparación con display: inline-block Permite establecer anchura y altura en el elemento.

Asimismo, si se establece display: inline-block, se mantendrán los márgenes superior e inferior/los márgenes internos, mientras que display: inline no lo hará.

En comparación con display: block, la principal diferencia radica en que display: inline-block no añade un salto de línea después del elemento, por lo que puede ubicarse al lado de otros elementos.

El siguiente ejemplo muestra los diferentes comportamientos de display: inline, display: inline-block y display: block:

Ejemplo

span.a {
  display: inline; /* 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; 
}

Prueba personalmente

Crear enlaces de navegación utilizando inline-block

Un uso común de display:inline-block Se utiliza para mostrar elementos de lista horizontalmente en lugar de verticalmente. El siguiente ejemplo crea un enlace de navegación horizontal:

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;
}

Prueba personalmente