1

I found this answer stating that browsers that follow standards all default to the "content-box" box model.

I'm currently using Mantine, it uses Emotion to style its components. While styling something I noticed that my page isn't actually using the "content-box" box model. Then I found this element:

<style data-emotion="css-global" data-s="">
*, *::before, *::after {
    box-sizing:border-box;
}
</style>

Which implies that emotion sets a global "border-box" box model.

What would motivate that decision?

Motonari
  • 63
  • 10
  • Because it makes things easier. This is in fact not something exclusive to emotion: many css resets include that too. Using border-box removes inconsistency in sizing expectations such that when defining width/height the border and padding widths are implied to be included. See: https://dev.to/anewman15/what-does-box-sizing-border-box-do-what-are-its-advantages-1nbb – Terry Jan 06 '23 at 09:31
  • @Terry Thanks for the link! Why is the standard content-box then? – Motonari Jan 06 '23 at 10:08
  • 1
    Ask the people who made that bad decision in the early days of the internet I suppose…? – Terry Jan 06 '23 at 17:18

0 Answers0