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.