Question Affichage CSS: inline vs inline-block [en double]


Dupliquer possible:
Quelle est la différence entre display: inline et display: inline-block? 

En CSS, display peut avoir des valeurs de inline et inline-block. Quelqu'un peut-il expliquer en détail la différence entre inline et inline-block?

J'ai cherché partout, l'explication la plus détaillée me dit inline-block est placé comme inline, mais se comporte comme block. Mais cela n'explique pas ce que signifie "se comporter comme un bloc". Est-ce une caractéristique spéciale?

Un exemple serait une réponse encore meilleure. Merci.


464
2018-02-08 08:24


origine


Réponses:


Éléments en ligne:

  1. respecter les marges gauche et droite et le rembourrage, mais ne pas haut et bas
  2. ne peux pas avoir un ensemble de largeur et de hauteur
  3. permettre aux autres éléments de s'asseoir à leur gauche et à droite.
  4. voir des notes secondaires très importantes sur ce ici.

Éléments de bloc:

  1. respecter tous ceux
  2. forcer un saut de ligne après l'élément de bloc
  3. acquiert pleine largeur si la largeur n'est pas définie

Eléments de blocage en ligne:

  1. permettre aux autres éléments de s'asseoir à leur gauche et à droite
  2. respecter les marges supérieure et inférieure et le rembourrage
  3. respecter la hauteur et la largeur

De W3Schools:

  • Un élément en ligne n'a pas de saut de ligne avant ou après celui-ci et il tolère les éléments HTML à côté.

  • Un élément de bloc comporte des espaces au-dessus et au-dessous de lui et ne tolère aucun élément HTML à côté.

  • Un élément inline-block est placé en tant qu'élément en ligne (sur la même ligne que le contenu adjacent), mais il se comporte comme un élément de bloc.

Lorsque vous visualisez ceci, cela ressemble à ceci:

CSS block vs inline vs inline-block

L'image est prise de cette page, qui parle aussi un peu plus sur ce sujet.


940
2018-02-08 08:30