Element with font-size less than 1em does not cover parent element-CodePudding

A child element with a font-size less than 1 is not the same size as its parent.

Why does the child element not cover the parent element completely? Shouldn't be the parent size the same as child size?

It seems that the height of parent is calculated by the font-size of 1em. Setting parent to display:inline-block also does not work.

<span id="parent" style="background: blue; font-size: 10rem;">
  <span id="child" style="background: red; font-size: 0.7em">text</span>
</span>

CodePudding user response：

A span is a subset of flow which is phrasing content whereas for instance a div is flow content. Here if we uncomment the CSS for display: block; it turns it into flow content and covers the container as "flow";

The following reference has a "visual" of some categories.

Reference for elements of content category: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories

Note the second gives it the nearly the same as a div

#parent {
  background-color: blue;
  font-size: 10rem;
}

#child {

  background-color: red;
  font-size: 0.7em;
  /* uncomment display to see flow content */
/* display:block; */
}

<span id="parent">
  <span id="child">text</span>
</span>

uncommented:

#parent {
  background-color: blue;
  font-size: 10rem;
}

#child {

  background-color: red;
  font-size: 0.7em;
  /* uncomment display to see flow content */
 display:block; 
}

<span id="parent">
  <span id="child">text</span>
</span>

CodePudding user response：

1.) span elements are inline elements. Their line-height(which in this case is their height) depends on the their font-size, unless they have a display setting of block.

2.) rem is relative to the font-size defined for html - if there is no rule for that, there will be a browser setting.

3.) em is relative to the font-size for the element itself. If the font-size for a span is defined in em units, it will depend on its parent elements font-size setting. In your case the parent has a setting relative to html, the child has a setting relative to the parent, so NO, it's height won't be the same as the parent's height, but 0.7 times as much, i.e. only 70% of the parent height.