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


Should they be used together, or no?


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

.div2 {
    width: 300px;
    border: 3px solid blue;
    box-sizing: border-box;



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.


Hi there asasass,

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



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.