CSS Box Model
CSS Box Model is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.
A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read Introduction to the CSS Box Model
The Box Model specification defines a set of keywords that refer to the edges of each part of the box, these are used as keyword values in CSS including as a value for the
box-sizing property, to control how the box model calculates its size.
- The edge of the content area of the box.
- The edge of the padding of the box, if there is no padding on a side then this is the same as
- The edge of the border of the box, if there is no border on a side then this is the same as
- The edge of the margin of the box, if there is no margin on a side then this is the same as
- In SVG refers to the stroke bounding box, in CSS treated as
- In SVG refers to the nearest SVG viewport element’s origin box, which is a rectangle with the width and height of the initial SVG user coordinate system established by the
viewBoxattribute for that element. In CSS treated as
Note: This specification defines the physical padding and margin properties. Flow-relative properties, which relate to text direction, are defined in Logical Properties and Values.
Properties controlling the margins of a box
Margins surround the border edge of a box, and provide spacing between boxes.
Properties controlling the paddings of a box
Padding in inserted between the content edge and border edge of a box.
There are other properties that relate to the box model, that are defined elsewhere.
- Introduction to the CSS box model
- Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.
- Mastering margin collapsing
- Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.
- Visual formatting model
- Explains the visual formatting model.