style: Apply "box-sizing: border-box" globally

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.

diff --git a/style.css b/style.css
index baf35bf59abe9367432554e01f6ecb7b3fa5ef9f..b770986f8164b899764069f1e9f736d32a5338cd 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,3 +1,8 @@
+/* Because this is the only sizing that is sane, make it global. */
+* {
+    box-sizing: border-box;
+}
+
 /*\
 |*|
 |*| Properties for the page: colors, etc.
@@ -124,7 +129,6 @@ body {
  * of the page content.
  */
 #page {
-    box-sizing: border-box;
     max-width: var(--page-max-width-padded);
     margin-left: auto;
     margin-right: auto;