What’s in the CSS Basic User Interface Module?

The CSS Basic User Interface Module standardises properties which define things like:

Today, I’ll have a look at what box-sizing does. In the graphic below, the only difference between the two boxes is that the larger one has box-sizing set to content-box (the default) and the smaller one has box-sizing set to border-box. In both cases, the width is set to 120px. In the larger box, this is taken to mean that the content is 120px wide and the width of padding and borders are added on top. In the smaller box, a width of 120px is taken to mean that the whole box should be 120px wide and padding and borders should fit inside. I find the latter to be far more intuitive. Indeed, many CSS frameworks set box-sizing to be border-box by default to take advantage of this more intuitive method of sizing.


Color scheme: