CODEWITHSUNDEEP
css
uuhan
uuhan

Reputation: 153

Why does this inline-block cause extra height of its parent?

Sample code like this:

.c1 {
  width: 480px;
  height: 480px;
  background-color: blue;
}

.c2 {
  width: 100%;
  background-color: red;
}

.c3 {
  display: inline-block;
  margin-top: 0; 
}

<div class="c1">
  <div class="c2">
    <div class="c3">
    </div>
  </div>
</div>

Why does the div.c2 appear? It does not exist when c3 has display other than inline-block.

Also see this codepan: https://codepen.io/uuhan/pen/ZXWodw

UPDATE:

I add line-height: 0 to c2, then div.c2 become thinner. But how can I fingure out this height (6px, with origin 22px) of c2 ?

Also see this codepan: https://codepen.io/uuhan/pen/EwKRLK

Upvotes: 5

Views: 396

Answers (1)

Johannes
Johannes

Reputation: 67776

c2 exists/has a height because it is at least as high as one line of text. If you add font-size: 0; to it, it disappears because then it has height 0.

https://codepen.io/anon/pen/RLaJLj

Upvotes: 5

Related Questions