CODEWITHSUNDEEP
htmlcss
Philip Wallin
Philip Wallin

Reputation: 45

How can setting font-size on parent instead of directly on an element affect vertical aligning?

I have set up a simple markup to try to understand how vertical aligning works, but how font-size affect the alignment got me confused.

Example with font-size set on parent element: https://jsfiddle.net/wL5zjLnf/1/

section { font-size: 75px; }

Same example with font-size set directly on span: https://jsfiddle.net/tmk2hqon/

span { font-size: 75px; }

In the first example the red block seem to align its middle with text last line middle, while in the second example the red block middle seem to align with baseline.

It seems to me like some white-space between the elements mess up the aligning between the text and the block, as if there are three elements:

Is this expected behavior, or have I misinterpreted how it works? I would have assumed that both examples would give the same result, and the result would be the red block middle be aligned with the bottom of the last line of text.

Upvotes: 0

Views: 24

Answers (1)

Paul
Paul

Reputation: 9022

By setting the parent's font-size, you implicitly set it's line-height as well, thus, the div will be in the middle.

When setting the span's font-size, the parent's line-height remains untouched and so the div is (apparently) at baseline level while it still is in the middle of the parent's line-height.

Upvotes: 1

Related Questions