CODEWITHSUNDEEP
htmlcsswidthpadding
anand s
anand s

Reputation: 35

What happens when the padding is bigger than the defined size?

<html>
<head>
<style>
* {
  box-sizing: border-box;
}
div {
  width: 10px;
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

I tried this but don't understand the result. What exactly happens when the padding is bigger than the given width?

Upvotes: 3

Views: 537

Answers (1)

Temani Afif
Temani Afif

Reputation: 272657

Your element will have a width equal to 70px*2 + 1px*2 = 142px. The sum of the padding and border is bigger than the specified width so it's like you have width equal to 0 and only the padding/border are defining the final width

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS2], section 10.2), this computation is floored at 0 ref

You can clearly see why the content width will end being equal to 0 and the final width is only the padding and border.

To express this using math, you have the following formula:

content-width + padding + border = final-width

And

content-width = max(0,specified-width - (padding + border))

I am using max() to express the fact that we take only positive value.

Do the calculation and you will get 142px

If specified-width - (padding + border) is positive, you will get the logical result of specified-width = final-width

Upvotes: 1

Related Questions