Espace inattendu sous un inline-block overflow hidden

C’est une colle, je ne comprends pas, ça doit être une chose évidente qui m’échappe. Soit un DIV imbriqué dans un autre DIV : si le DIV imbriqué est inline-block avec overflow hidden, alors sous ce DIV, apparait un espace inattendu, et cet espace disparait si j’utilise overflow visible au lieu de overflow hidden. C’est contre intuitif .

Exemple simplifié : display-inline-block-overflow-hidden.html

Je vois la même chose avec Opera et Firefox. J’ai cherché dans les références du W3C, et je ne vois rien qui explique ce que je constate.

Vous voyez la même chose ? Des gens ont une idée de ce qu’il se passe ?

Salut à toi

Je te donne une piste à explorer en te linkant un article d'alsacréations sur un problème similaire avec les images

https://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html

Ton problème est dû à la valeur par défaut de vertical-align ...
Quand tu display(s) en inline-block,
est initialisé un vertical-align en baseline

c'est lui qui crée ton espace indésirable....

pourquoi ?

Normalement tu devrais pouvoir (via le lien) résoudre facilement cette énigme ...
(finger in ze neus)

bien à toi

_laurent a écrit :
Tu peux tester ça en passant le line-height du parent à 0 (et en remettant celui de l'enfant a 1em). L'espace disparaît.

C'est bien ça, par contre un simple vertical-align: bottom sur l'enfant turbulent règle tout aussi bien le souci.

Quant au souci il est causé par le déplacement de la baseline lorsque l'on défini overflow hidden: Par défaut un élément en inline-block a une baseline qui est celle de la dernière ligne de texte de ses enfants. Comme ce comportement peut vite créer n'imp si une large portion est cachée, la baseline devient alors la bordure du bas de l'élément en display: inline-block avec overflow:hidden.
Comme l'alignement vertical par défaut est baseline, la boite aligne donc sa bordure basse sur la baseline de la ligne dans laquelle elle se situe. Si tu places du texte après ta div dans ton exemple tu verras clairement cet alignement.

p.s. pour rappel la baseline du texte est la limite inférieure des lettres comme: «East.2».
Modifié par kustolovic (15 Sep 2017 - 07:42)

kustolovic a écrit :
C'est bien ça, par contre un simple vertical-align: bottom sur l'enfant turbulent règle tout aussi bien le souci.

Oui j'ai lu ça dans l'article du coup, j'avais jamais essayé.

Merci pour ces explication Kustolovic c'est encore plus clair du coup !

@kustolovic Merci
Tes 2 posts sont presque un tuto,...

Je crois qu'avec eux Hibou a résolu son problème et d'autres ont reçu la lumière
merci encore...

@zelena
Je ne sais pas si on peut dire strictement que "inline-block transforme en caractères"... ou alors en métaphore.... puisque ça lui donne un comportement similaire....
Je crois (enfin je ne suis pas un Maître Alsanaute), mais je suis convaincu que l'explication a été donnée par @kustolovic

Bien à vous en la Saint & Gration

Ethos a écrit :
@kustolovic +1

vertical-align: top; devrait fonctionner aussi alors ... ?

D’après ce que j’ai testé après avoir lu l’article, n’importe quel alignement pourvu que ce ne soit pas baseline : bottom, middle, top.
Modifié par hibou57 (15 Sep 2017 - 19:46)

ça n'a rien d'empirique:

a écrit :
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

c'est dans les bonnes vieilles css2, tout en bas, le dernier paragraphe: https://www.w3.org/TR/CSS2/visudet.html#q10.0

C'est donc bel et bien une particularité qui ne concerne que inline-block/overflow combiné.

Et quand je dis nimp, c'est nimp! Si ce n'était pas le cas, scroller dans une boite multiligne en inline-block déplacerait la boite au lieu du contenu