Block Boxes

62

Block boxes can behave in sometimes predictable, sometimes surprising ways. The handling of box placement along the horizontal and vertical axes can differ, for example. In order to fully understand how block boxes are handled, you must clearly understand a number of boundaries and areas. They are shown in detail in figure below:

The complete box model
The complete box model

By default, the width of a block box is defined to be the distance from the left inner edge to the right inner edge, and the height is the distance from the inner top to the inner bottom. Both of these properties can be applied to an element generating a block box. It’s also the case that we can alter how these properties are treated using the property box-sizing.

box-sizing
Values:
content-box | padding-box | border-box | inherit
Initial value:
content-box
Applies to: All elements that accept width or height values
Inherited: No
Computed value: As specified

This property is how you change what the width and height values actually do. If you declare width: 400px and don’t declare a value for box-sizing, then the element’s content box will be 400 pixels wide; any padding, borders, and so on will be added to it. If, on the other hand, you declare box-sizing: border-box, then it will be 400 pixels from the left outer border edge to the right outer border edge; any border or padding will be placed within that distance, thus shrinking the width of the content area. This is illustrated in figure below.

The effects of box-sizing
The effects of box-sizing

We’re talking about the box-sizing property here because, as stated, it applies to “all elements that accept width or height values.” That’s most often elements generating block boxes, though it also applies to replaced inline elements like images as well as inline-block boxes.

The various widths, heights, padding, and margins all combine to determine how a document is laid out. In most cases, the height and width of the document are automatically determined by the browser and are based on the available display region, plus other factors. With CSS, of course, you can assert more direct control over the way elements are sized and displayed.

« Back to Glossary Index