Pourquoi est-ce inline-block élément poussé vers le bas?

Fondamentalement, vous avez ajouté plus de désordre dans votre code, ce qui crée plus de confusion j'ai tout d'abord essayer de supprimer l'encombrement qui entrave la compréhension de la véritable question.

Tout d'abord, nous devons établir que ce qui est la vraie question?
C'est pourquoi "inline-block" élément est poussé vers le bas.

Maintenant nous commençons à le comprendre et enlever le désordre de la première.

1 -
Pourquoi ne pas donner à tous les trois divs même la largeur de la bordure?
Nous allons lui donner.

2 - Ne flottante élément a aucun lien avec inline-block élément étant poussé vers le bas?
Non, il n'a rien à faire avec elle.

Donc, nous avons enlevé le div au total. Et vous assistons même le comportement de inline-block élément étant poussé vers le bas.

Ici vient le tour de certains la littérature de saisir l'idée de la ligne de boîtes et comment ils sont doublés dans la même ligne esp lire le dernier paragraphe avec soin, car c'est là que réside la réponse à votre question.

La base d'un 'inline-block' est la ligne de base de la dernière ligne de la boîte dans le flux normal, sauf qu'il a pas de flow line boîtes ou si son "dépassement" la propriété a une valeur calculée d'autres que d'être "visible", et dans ce cas, la référence est la marge du bas bord.

Si vous n'êtes pas sûr des référence voici une brève explication en termes simples.

Tous les caractères à l'exception de "gjpqy" sont écrites sur la ligne de base que vous pouvez penser de base que si vous dessinez une simple ligne horizontale de même que le soulignement juste en dessous de ces "caractères aléatoires", puis ce sera le départ, mais maintenant, si vous écrivez un de " gjpqy caractère(s) sur la même ligne puis la partie inférieure de ces personnages tombent au-dessous de la ligne.

Donc, nous pouvons dire que tous les caractères à l'exception de "gjpqy' sont écrits entièrement au-dessus de la ligne de base alors qu'une partie de ces caractères sont écrits au-dessous de la ligne de base.

3 - Pourquoi ne pas vérifier où est la base de notre ligne?
J'ai ajouté quelques personnages qui montrent la ligne de base de notre ligne.

4 - Pourquoi ne pas ajouter des caractères dans notre divs trop à trouver leurs lignes de base dans les div?
Ici, certains caractères ajoutés dans les divs pour clarifier de base.

Maintenant, quand vous comprenez au sujet de base, lire la suite de la version simplifiée sur base de inline-block.

i) Si inline-block en question a son débordement de la propriété a la valeur visible (qui est par défaut donc pas besoin de définir si).
Ensuite, son niveau de référence serait la ligne de base du bloc contenant de la ligne.

ii) Si inline-block en question a son débordement de jeu de propriétés AUTRES QUE visible.
Alors sa marge inférieure serait sur le point de référence de la ligne de la boîte contenant.

• Premier point dans le détail

Maintenant regardez ce nouveau afin de clarifier votre concept que ce qui se passe avec le vert div.
Si encore toute confusion ici est ajouté plus de caractères à proximité de green div pour établir la ligne de base du bloc contenant et vert div de base est alignée.

Bien, je suis maintenant en affirmant qu'ils ont la même base? DROIT?

5 - Alors pourquoi ne pas se chevauchent et voir s'ils sont aptes droit l'un sur l'autre?
Donc, je vous apporte troisième div -left: 35px; pour vérifier si ils ont la même base maintenant?

Maintenant, nous avons eu notre premier point prouvé.

• Deuxième point dans le détail

Bien, après explication du premier point deuxième point est facile à digérer et vous voyez que le premier div qui a pour propriété de dépassement différent de visible (caché) a sa marge inférieure sur la ligne de base de la ligne.

Maintenant, vous pouvez faire quelques expériences afin de mieux l'illustrer.

1. Ensemble première div en overflow:visible (ou l'enlever complètement).
2. Ensemble deuxième div en overflow: autres que visible.
3. Ensemble les deux divs overflow: autres que visible.

Maintenant votre désordre et de voir si tout est à la recherche d'amende pour vous.

1. Apporter de retour de votre div flottant (bien sûr, il est nécessaire d'
   
   augmenter la largeur de corps)
   Vous voyez, il n'a pas d'effet.
2. Ramener même bizarre marges.
3. Ensemble vert div en overflow: visible que vous définissez dans votre question (que l'incohérence est due à l'augmentation de la largeur de la bordure de 1px de 5px donc si ajuster négatif à gauche vous verrez il n'y a pas de problème)
4. Maintenant supprimer d'autres personnages que j'ai ajouté à de l'aide dans
   la compréhension. (et bien sûr supprimer négatif à gauche)
5. Enfin réduire la largeur du corps parce que nous n'avons plus besoin le plus large.

Et maintenant nous sommes de retour là où nous avons commencé à partir.

J'espère avoir répondu à votre question.

Suffit d'utiliser vertical-align:top;

Démo

_{j'ai d'abord commencé sur le répondeur cette question, mais il a été enfermé comme dupe avant de finir, donc je poste la réponse ici.}

Tout d'abord, nous avons besoin de comprendre ce que inline-block est.

Le définition dans MDN dit:

L'élément génère un élément de bloc de la boîte qui sera coulé avec
entourant le contenu comme s'il s'agissait d'un single inline boîte (se comportant
comme l'a remplacé élément)

De comprendre ce qui se passe ici, nous avons besoin de regarder vertical-align, et c'est la valeur par défaut baseline.

Dans cette illustration, vous avez cette couleur graphique:

Bleu: La base de référence

Rouge: le haut et Le bas de la hauteur de la ligne

Vert: le haut et Le bas de la ligne contenu de la boîte.

Dans la #gauche de l'élément, vous avez un contenu textuel qui contrôle ce qui est de la ligne de base. Cela signifie que le texte à l'intérieur définit la ligne de base pour la #gauche.

Dans le #droit, il n'y a pas de contenu, de sorte que le navigateur n'a pas d'autre choix que d'utiliser le fond de la boîte comme référence.

Se cette visualisation, d'où j'ai tiré la ligne de base sur un exemple où la première inline conteneur a peu de texte, et la prochaine est vide:

Si vous alignez un élément vers le haut, vous dire que vous alignez le haut de cet élément vers le haut de la boîte de ligne.

Cela pourrait être plus facile à comprendre par un exemple.

CSS:

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}

HTML:

<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

Le résultat est que cela - et j'ai ajouté la ligne bleue et la ligne rouge de la boîte:


Ce qui se passe ici, c'est que la hauteur de la ligne de la boîte dépend de la façon dont le contenu de l'ensemble de la ligne est tracée. Cela signifie que pour calculer le haut de l'alignement, de la basline alignements doivent être calculées dans un premier temps. Le #middle élément a vertical-align:top, ce n'est donc pas utilisé pour la ligne de base de positionnement. mais le #left et #right sont positionnés verticalement, de sorte que leurs lignes de base sont alignés. Lorsque cela est fait, la hauteur de la zone de ligne de a augmenté, parce que les #right élément a été poussé un peu comme un résultat de la plus grande taille de police. Ensuite, la position de tête pour la #middle élément peut être calculée, et c'est sur le haut de la boîte de ligne.

Essayez d'ajouter padding:0; pour le corps et le retrait de la marge de votre divs.

Ajouter background-color:*any couleur de côté de fond* pour vérifier la différence.