What's the rule of thumb when using padding and box-border?

#1

Should they be used together, or no?

https://jsfiddle.net/cLgdpv16/1/

.div1 {
    width: 300px;
    height:20px;
    border: 3px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    padding-bottom:20px;
    border: 3px solid blue;
    box-sizing: border-box;
}

image

#2

That’s the whole point of using border-box, it does the math for you and keeps the total padding and borders confined to your width/height.

Your .div2 example does not have a height so the total height is 26px, same as box-sizing: content-box; would give you.

#4

Hi there asasass,

regardless of “border-box”, I would say that the
rule of thumb is not to set a fixed “height” value.

coothead