理解不同字体大小的 CSS 换行

Question

Consider this example:

 div.big { font-size: 2em; font-weight: bold; } div.big .small { font-size: 40%; } div.small { font-size: 0.8em; font-weight: bold; } div.small .big { font-size: 2rem; }

 <div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div> <p>Something else</p> <div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div> <p>Something else</p>

In the first case (small font-size inline element inside a bigger font-size block element), the spacing around the wrapped text isn't the same as in the second case (big font-size inline element inside a smaller font-size block element).

It gets even more obvious when wrapping on multiple lines:

What is the property/behavior that causes this difference, and is there a way to make the first example look like the second one without changing the markup?

Answer 1

The reason for what you see is the line-height , which by default is relative to the font-size , ie to the font-size of the parent/block element. It usually is defined in percent or as a multiplication factor like 1.6 - if you don't see any such parameter in the stylesheet, there's still an according browser default setting, usually between 1.4 and 1.6.

If you set the line-height to a fixed pixel value (which in real life you should almost never do), both examples look the same, as in the following variation of your code:

 div.big { font-size: 2em; font-weight: bold; line-height: 16px; } div.big .small { font-size: 40%; } div.small { font-size: 0.8em; font-weight: bold; line-height: 16px; } div.small .big { font-size: 2rem; }

 <div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div> <p>Something else</p> <div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div> <p>Something else</p>

Answer 2

Welcome to SO.

Just add display: contents; to

div.big {
  font-size: 2em;
  font-weight: bold;
  display: contents;
}

DEMO:

 div.big { font-size: 2em; font-weight: bold; display: contents; } div.big .small { font-size: 40%; } div.small { font-size: 0.8em; font-weight: bold; } div.small .big { font-size: 2rem; }

 <div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div> <p>Something else</p> <div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div> <p>Something else</p>