CODEWITHSUNDEEP
htmlcss
godblessstrawberry
godblessstrawberry

Reputation: 5078

Padding overrides height of the element with box-sizing: border-box

In snippet below padding-top overrides the height and max-height properties of container:

I want this <div> to be 10px high, but its 100px because of padding-top

as far as I understand this should be solved by box-sizing: border-box but this doesn't help

w3schools - border-box: the width and height properties (and min/max properties) includes content, padding and border, but not the margin

.padding-test {
  background: linear-gradient(109deg, #3adffd, #00abfb);
  outline: 1px solid #3b3c6d;
  width: 100%;
  padding-top: 100px;
  max-height: 10px;
  height: 10px;
  box-sizing: border-box;
}
<div class='padding-test'></div>

Can someone explain why is this happening and how to fix this? Same happens for width and padding-left

UPD: I faced this issue when tried to change max height for box sized by aspect-ratio approach. I solved initial issue by setting parent size, but I still want to understand how border-box works with the padding - does it shrinks only content? is this correct behavior? is there any solution for this exact situation - can I override padding somehow?

Upvotes: 2

Views: 2103

Answers (1)

Jing
Jing

Reputation: 11

I had run into the same doubt. According to MDN:

border-box
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

so box-sizing: border-box doesn't mean you can set the "border box" directly, but only affects how "content box" is calculated, which cannot be negative.

And my solution is: avoid the paddings, use a height-holding div or ::before pseudo element with designated height instead. (may also need overflow: hidden.) For example:

.padding-test {
  height: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.padding-test::before {
  height: 100px;
  content: '';
  display: block;
}

Upvotes: 1

Related Questions