This time I drew in the top and bottom of the line box’s text box (green, more on this below) and the baseline (blue), too.
In case of no in-flow content the baseline is, again, the bottom edge of the margin-box (example on the right). So, it is the same as the inline-block element’s bottom edge. In case of in-flow content but an overflow property evaluating to something other than visible, the baseline is the bottom edge of the margin-box (example in the middle). For this last element its baseline is found according to its own rules. In case of in-flow content the baseline of the inline-block element is the baseline of the last content element in normal flow (example on the left). The Inline-block element’s baseline depends on whether the element has in-flow content: The Inline-block element’s outer edges are the top and bottom edge of its margin-box. The baseline of each inline-block element is shown as a blue line. The boundaries of the margin is indicated by red lines, the border is yellow, the padding green and the content area blue. In the following illustration the top and bottom of line boxes are indicated by red lines.įrom left to right you see: an inline-block element with in-flow content (a “c”), an inline-block element with in-flow content and overflow: hidden and an inline-block element with no in-flow content (but the content area has a height). Differently sized content means line boxes of different height. All these lines have a so-called line box, which encloses all the content of its line. Once there are more elements than fit into the current line, a new line is created beneath it. Inline-level elements are laid out next to each other in lines. They can have a width and height (possibly defined by its own content) as well as padding, a border and margin. Inline-block elements are what their name suggests: block elements living inline. Inline elements are basically tags wrapping text. inline-table (not considered in this article). These are elements, whose display property evaluates to Vertical-align is used to align inline-level elements. Vertical-Align Acts On Inline-Level Elements In a Line Box HOW TO VERTICALLY ALIGN TEXT IN CSS INPUT HOW TO
Example: How to remove the gap between two aligned elements.Example: How to vertically center elements without a gap at the bottom.
Example: How to center an icon next to a bit of text.Vertical-Align Aligns Baselines, Tops and Bottoms.Inline-level Elements and Line Boxes Have Baselines, Tops and Bottoms.Vertical-Align Acts On Inline-level Elements In a Line Box.So, to minimize future pain, I waded through W3C’s CSS specifications to clarify the behavior of vertical-align once and for all. For example, it might happen, that the element you changed vertical-align for doesn’t change its alignment at all, but other elements next to it do! What a joy! Like centering an icon next to a bit of text.īut, it can be a real scumbag sometimes with all its seemingly mysterious rules at work. It’s intended use is to align text and elements next to each other. Yep, let’s talk about the CSS property vertical-align.
0 kommentar(er)
