CSS display: inline vs inline-block

Question

Double Possible:
Quelle est la différence entre display: inline et display: inline-block?

Dans le CSS, l'affichage peut avoir des valeurs en direct et en inline-block... quelqu'un Peut-il expliquer en détail la différence entre inline inline-block?

J'ai cherché partout, le plus détaillé explication me dit inline-block mis en ligne, mais se comporter comme un bloc. Mais il n'a pas expliqué ce qu'est exactement "se comporter comme un bloc" signifie. Est-il une particularité?

Un exemple serait encore mieux répondre. Merci.

Answer 1

Les éléments en ligne:

1. le respect de gauche et de droite marges et padding, mais pas du haut et du bas
2. ne peut pas avoir une largeur et hauteur de l'ensemble
3. permettre à d'autres éléments pour s'asseoir à leur gauche et à droite.

Les éléments de bloc:

1. respect à tous ceux
2. forcer un saut de ligne après l'élément de type block

Inline-block éléments:

1. permettre à d'autres éléments pour s'asseoir à leur gauche et à droite
2. le respect du haut et du bas des marges et padding
3. le respect de la hauteur et de la largeur

De W3Schools:

• Un élément inline n'a pas de saut de ligne, avant ou après lui, et il tolère des éléments HTML à côté d'elle.

• Un élément de bloc a certains espaces au-dessus et au-dessous, et ne tolère pas tout les éléments HTML à côté d'elle.

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

Vous pouvez voir que c'est la différence près du bas de cette page.