Visual formatting model - 9.4.1 Block formatting contexts
Floats, absolut positionierten Elemente, Block Behälter (wie inline-Blöcke, tabellen Zellen und tabellen Bildunterschriften), die nicht-Boxen blockiert ist, und Block-Boxen mit ‚Überlauf 'anders als' sichtbar ' (außer wenn dieser Wert in das Ansichtsfenster übernommen wurde), legen Sie neue Blockformatierungskontexte für deren Inhalt fest.
Genauer gesagt wird ein neuer Blockformatierungskontext erstellt, wenn die Überlaufeigenschaft geändert wird. Standardmäßig ist der Eigenschaftswert vertical-align
eines Elements baseline
. Sie können dies einfach in etwas wie top
ändern, um dies zu beheben.
Updated Example
span.yavbc-color-tip span {
display: inline-block;
padding: 3px;
border-radius: 8px;
border: none;
background-color:#005e8e;
color:#7cd3ff;
overflow-x: hidden; /* This gives extra space under this span. Why? */
vertical-align:top;
}
Hinweis Geschieht dies nicht, wenn die Anzeige des Elements inline-block
nicht geändert wird? Es tritt nicht mit inline
Elementen auf - example das zeigt dies.
Dank Josh, in der Tat 'vertikal-align' auf der inneren Spannweite behebt es. Obwohl ich nicht verstehen kann warum. Ich kann vielleicht sehen, warum Sie diese Änderung versucht haben, aber die Regeln in 9.4.1 sprechen nur von "neuen Blockformatierungskontexten". Die innere Spanne bewegt sich nicht vertikal (oder tut es ???), wenn Sie 'vertical-align: top' hinzufügen. – Leo
Es ist interessant, dass dies auch nicht passiert, wenn das Element "block" anzeigt. Die spezifizierte Spezifikation scheint "Blockcontainer, die keine Blockboxen sind" (Inline-Blöcke) und "Blockboxen mit 'Überlauf' außer 'sichtbar'" zu trennen, was diesen Fall (einen 'Inline-Block' nicht ausdrücklich einschließt) mit "Überlauf" anders als "sichtbar"). – Kylok