One CSS property (among many) that ALWAYS cause problems for me is the box-sizing property. Therefore, I might as well add a post for it.
Normally, when setting the width and height of an element, it affects only the content of the element. When there is a significant value for the padding and border (usually the padding), the actual width and height of the element will be bigger than the width and height set.
For example, if the padding for an element is 10 (keeping border at 0 for simplicity), and the width and height are set to 200 and 100, respectively, then the actual dimension of the element will be 220 x 120. This is because the 200 x 100 will be the content of the element. Then the top and bottom padding of 10 adds 20 to the 100. Similarly, the left and right padding of 10 adds 20 to the 200.
To get the element to be exactly 200 x 100, its box-sizing property must be set to border-box. Of course, this means that the actual spacing for the content will be <= to whatever values we use for width and height. In our example, that would be 180 x 80.
To be complete, the default value of the property is content-box.
NONE of this makes any intuitive sense. It’ll just have to be one of those things that need to be memorized or documented. This post is to help with the latter.
Tailwind CSS
Just some addendum to save a lookup to https://tailwindcss.com/docs/box-sizing: the corresponding Tailwind CSS class values are:
box-border — this will add/set box-sizing: border-box
box-content — this will add/set box-sizing: content-box (default)
What About …
A long time ago someone told me to never whine about something without suggesting an alternative.
So what would’ve made it more intuitive? How about naming the property sizing-policy with allowable values of: content, content-padding, and content-padding-border?