Text overflow - why is block element smaller than inline element

Question

When setting line-height: 1; and margin: 0; the lowercase p and g is overflowing the block level element. However inline elements have no overflow. Why this difference?

    .large {
      font-size: 116px;
      line-height: 1;
      overflow: hidden;
    }

    * {
      margin: 0px;
      padding: 0px;
      border-width: 0px;
    }

<body>
    <div class="large">
      block pPgG
    </div>
    <div>
      <span class="large">
        inline pPgG
      </span>
    </div>
</body>

Temani Afif · Accepted Answer · 2020-06-07T10:39:02.560

overflow apply to only block level element ^ref and the content of inline element cannot overflow since you cannot have it's height smaller than its content due to the fact that you cannot define height on inline element and the height is automatically defined by the content ^ref

Adding border will clearly show this:

.large {
  font-size: 50px;
  line-height: 1;
}

.overflow {
  overflow: hidden;
  border:1px solid green;
}

body > div  {
  margin:20px;
  outline:2px solid red;
}

<body>
  <div class="overflow large">
    Testing: pPgG
  </div>
  <div>
    <span class="overflow large">
        Testing: pPgG
      </span>
  </div>
</body>

Notice how the span with its content is overflowing the div and it's not the content inside the span overflowing the span.

Even if you set line-height:0 you will only restrict the height of the block element and never the span element:

.large {
  font-size: 50px;
  line-height: 0;
}

.overflow {
  overflow: hidden;
  border:1px solid green;
}

body > div  {
  margin:50px;
  outline:2px solid red;
}

<body>
  <div class="overflow large">
    Testing: pPgG
  </div>
  <div>
    <span class="overflow large">
        Testing: pPgG
      </span>
  </div>
</body>

Related question to understand how height is caclulated and the difference between block and inline element: How to determine height of content-box of a block and inline element

That makes perfect sense. If I have a font that is rendered outside a span element, is the line-height incorrect even if it is above 1? or is the font simply designed this way? — dwigt, Jun 07 '20 at 11:59
@dwigt the font is designed that way, line-height play no role in defining the content area of the font but only define the line-box. Here is another related question for more details: https://stackoverflow.com/a/55978512/8620333 — Temani Afif, Jun 07 '20 at 12:03

Text overflow - why is block element smaller than inline element

1 Answers1