0

Example: https://codepen.io/229075284/pen/aboQVXZ

  .outer{
    background-color: pink;
}
.outer::after{
    content:'';
    background-color: red;
    display: inline-block;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 0;
   /* display: table; */
}
.inner{
    background-color: blue;
    height: 300px;
}
<div class="outer">
  <div class="inner"></div>
</div>

When I set display of outer::after to inline-block,the outer will have some extra space marked as pink, even if set font-size and line-height to 0. However, when I set display to table,the extra space disappears.

So I am wondering why the extra space appears?

HanQ
  • 95
  • 1
  • 8
  • font-size and line height should go to the parent element – Temani Afif Sep 20 '19 at 09:04
  • and the overflow:hidden is changing the baseline of the element to be its bottom that's why you will also have this issue even if you have text inside. This will make it behave the same as image thus the first duplicate (the second one will allow to get more details about alignment in general) – Temani Afif Sep 20 '19 at 09:05

1 Answers1

0

I checked your codepen. It is a combination of both display: inline-block and content: "" on the ::after pseudo element. You are basically telling the browser that right after the outer element you want to reserve an element's place in the DOM.

You could see that if you remove the content: "" although you are using inline-block the extra pseudo div after the .outer element would disappear. That is because although you stated a certain display mode you practically have no content in this element and the browser ignores your element because it has no fixed size in pixels and no actual content within it.

The reason .outer is growing is that its height is set to auto in default, if you would give it a fixed height in pixels it might not show the spare div.

Your question has nothing to do with line-height or `overflow'.

Me personally I prefer not to use pseudo-classes like ::after and ::before in production. I prefer using regular divs and have my code more readable and understandable by other developers, anyway I hope I helped out. Feel free to discuss further if you have more questions.

greensin
  • 472
  • 5
  • 8
  • I'm already set `line-height` to `0` and set `overflow` to `hidden`, but it still exsit. And, when i remove `content` of `outer::after`, the pseudo element will disappear in DOM tree.Otherwise, i try to set `content` of `outer::after` to `url()`,the extra space still exsit. – HanQ Sep 20 '19 at 07:52