Content-box / border-box

Is there one I should use over the other or is it a personal preference/ situational choice?

It’s a technical choice, not a personal preference. When tightness of fit is not a concern then the border can be outside of the content box, but if the size is critical for the right fit, then the border should go inside the content box.

Addendum

https://repl.it/@mtf/border-box-vs-content-box

border-box_vs_content-box

In the above, on the left the border is outside of the content box, on the right the border is inside content box.

So, the border can still be manipulated, only from within?

And, your dimensions aren’t 300x300px (for the content) + the 20px (padding) + 2 px (border). Instead, your dimensions already include the pre-set border and padding sizes.

The default border is inside the margin but outside of the content box. That would be the one on the left, above.

But, you can’t still manipulate the border after you set box-sizing: border-box; can you?

Go to the link above and click Run. Now hover on the right hand box.

1 Like

I tried it, but I’m afraid I still don’t understand. I’ll keep trying

We’ve only compared the two CSS states. CSS drives the visual, and that’s what is being demonstrated. It’s done with script and DOM event detection. Remember, the DOM is where everything happens.