display: inline-block CSS

display: inline-block

Avec display: inline En comparaison avec display: inline-block Permet de définir la largeur et la hauteur de l'élément.

De même, si display: inline-block est utilisé, les marge extérieure/interne et le padding sont conservés, tandis que display: inline ne le fait pas.

En comparaison avec display: block, la principale différence réside dans le fait que display: inline-block ne rajoute pas de saut de ligne après l'élément, ce qui permet à cet élément de se situer à côté d'autres éléments.

Voici un exemple qui montre les différents comportements de display: inline, display: inline-block et display: block :

Exemple

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

Essayer vous-même

Création de liens de navigation avec inline-block

Usage commun de display :inline-block Affichage horizontal des éléments de liste plutôt que vertical. L'exemple suivant crée un lien de navigation horizontal :

Exemple

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

Essayer vous-même