CODEWITHSUNDEEP
csshtml
Ryan1729
Ryan1729

Reputation: 1010

CSS treats height differently than width?

On this podcast it is stated that CSS widths are passed down to the children but the heights are passed up to the parents. The relevant portion starts at 11:43 and goes on for a few minutes.

While I unfortunately find it all too easy to believe that CSS does a weird thing like that, I would like to see an example page that demonstrates this.

Can someone make a page that clearly shows that the height is passed up rather than down?

Upvotes: 0

Views: 55

Answers (1)

user3589620
user3589620

Reputation:

Up to down (Outside to inside). The outside height doesn't affect the inside.

div {
  border: 1px solid;
}

.outside {
  height: 200px;
}
<div class="outside">
  <div class="inside">Inside</div>
</div>

Down to up (Inside to outside). The inside height does affect the outside.

div {
  border: 1px solid;
}

.inside {
  height: 200px;
}
<div class="outside">
  <div class="inside">
    Inside
  </div>
</div>

Upvotes: 1

Related Questions