This is really the only sane way to work. Without this, the behavior
of padding is really hard to use. For example, if I set an element to
"width: 100%" it fills the space like I want. But then, its child
elements might be right up against the left edge, so I had
"padding-left" of some amount. This moves the children from the edge
like I want, but _also_ makes the element grow so that its now larger
than the 100% of its container like I had specified.
That looks to me entirely like a broken default and is something to
just set once, globally to avoid this class of frustration.
+/* Because this is the only sizing that is sane, make it global. */
+* {
+ box-sizing: border-box;
+}
+
/*\
|*|
|*| Properties for the page: colors, etc.
* of the page content.
*/
#page {
- box-sizing: border-box;
max-width: var(--page-max-width-padded);
margin-left: auto;
margin-right: auto;