What’s in the CSS Basic User Interface Module?
The CSS Basic User Interface Module standardises properties which define things like:
- How element boxes are sized with the box-sizing property
- Element outlines (not borders) with the outline property
- How elements can be resized with the resize propetry
- The appearance of cursors and carets
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.