CSS Box Model
Every element in CSS is treated like a rectangular box.
This is sometimes referred to as the box model.
The box is made up of four parts.
Starting from the outside and moving toward the center, these are the margin, border, padding, and content.
The margin is the space between an element’s border and its surrounding elements.
It is specified with the margin property.
The border is an outline around the box.
Borders can be styled with a thickness, style, and color. It is specified with several properties: border-style, border-width, border-color, and border.
The padding is the space between the element’s border and the content itself. It is specified with the padding property.
The following image shows the css box model -
The perimeter of each of the four areas is called an edge.
Each edge defines a box.
The innermost rectangle is the content box.
The width and height of this depends on the element's rendered content (text, images and any child elements it may have).
Next is the padding box, as defined by the padding property.
If there is no padding width defined, the padding edge is equal to the content edge.
Then we have the border-box, as defined by the border property. If there is no border width defined, the border edge is equal to the padding edge.
The outermost rectangle is the margin box, as defined by the margin property.
If there is no margin width defined, the margin edge is equal to the border edge.
Note -
By default, most elements have no padding, border, or margin. There are some exceptions, like button elements.
Now we will see some examples -
Example 1 - This Example shows two div elements with some color to differentiate them but no other styling applied.
Output -
Notice how the elements run up against one another and generally look cramped.
By adding padding, border, and margin to these elements, we can make it easier to read.
Now we will see the changes -
Example -
Output -
