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:
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
content-box | padding-box | border-box | inherit
|Applies to:||All elements that accept width or height values|
|Computed value:||As specified|
This property is how you change what the
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.
We’re talking about the
box-sizing property here because, as stated, it applies to “all elements that accept
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