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

<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?

CodePudding user response：

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

CodePudding user response：

I'm not 100% sure but it probably just goes down to 100% of the width. So if you put padding: 99999px; it would round down to padding: 100%