From 9be7b5eabaa074f23c410861dd8b99d61711a6f6 Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Mon, 8 Jun 2020 06:48:56 -0700 Subject: [PATCH 1/1] 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. --- style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index baf35bf..b770986 100644 --- 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; -- 2.43.0