Box Model: Padding and Margin
HTML elements are kept inside a box. This page discusses two of the important components of a box: padding and margin. Padding refers to the space outside the content but within the border. Margin refers to the outer-most space of the border but within the outer boundary of the box.
The following figure shows the scope of these two parameters (padding and margin). The figure also shows four sides for both padding and margin (top, right, bottom, and left).
Figure: Padding/Margin in the Box Model
Usage: padding: [<value_in_percentage> | <value_in_pixels>] {1,4} | inherit
Description: Specifies the padding-width for a box. If we provide a single value, then that will be applied to all four sides. If we provide two values, then the first would apply to top/bottom sides and the second would apply to right/left sides. If we provide three values, then the first would apply to top, second would apply to left/right sides, and the third would apply to bottom. If we provide four values, then they would apply to top, right, bottom, and left, respectively. Can also be specified in as percentage (e.g 1em). We should note that 1em is equivalent to the font-size of the element in this question and is based on the font-size of the parent; thus, if we add a margin around a div element, then 1em is the font-size of the div element. This value does not inherit automatically; if we want, then we should use the "inherit" value. Specifying padding property is optional.
Example: A value of "padding: 16px;" means that we would add a 16px wide padding around the content.
Example: Specifying "padding: 1em 2em;" would add a 1em wide padding on top/bottom and 2em wide padding on left/right. The em value is calculated based on the font-size of the parent.
Usage: margin: [<value_in_percentage> | <value_in_pixels>] {1,4} | inherit
Description: We can use this property to specify margin for a box. We can specify up to 4 values. If we provide a single value, then that will be applied to all sides. If we provide two values, then the first would apply to top/bottom sides and the second would apply to right/left sides. If we provide three values, then the first would apply to top, second would apply to left/right sides, and the third would apply to bottom. If we provide four values, then they would apply to top, right, bottom, and left, respectively. Can also be specified in as percentage (e.g 1em). We should note that 1em is equivalent to the font-size of the element in this question and is based on the font-size of the parent; thus, if we add a margin around a div element, then 1em is the font-size of the div element. This value does not inherit automatically; if we want, then we should use the "inherit" value. Specifying margin property is optional.
Example: Specifying "margin: 40px;" would add a 40px wide margin around the border.
Example: Specifying "margin: 1em 2em;" would add a 1em wide margin on top/bottom and 2em wide margin on left/right. The em value is calculated based on the font-size of the parent.
Let us now see two examples that highlight the usage of these two properties. For both
of these examples, we use the same HTML and simply update the linked CSS file. The
HTML file (shown below) is fairly simple and consists of two paragraphs.
<!doctype html>
<html>
<head>
<title> Learning CSS: Box Borders </title>
<link type="text/css" rel="stylesheet" href="padding_margin.css">
</head>
<body>
<p id="id_jurassic">
Jurassic period was one of the three main periods of Mesozoic Era. Jurassic
period is further divided into three sub-periods: early Jurassic, middle
Jurassic, and late Jurassic. This period was a significant period for dinosaurs
and other reptiles. They became the most dominant and the most diverse vertebrae
during this period.
</p>
<p id="id_reptiles">
Reptiles ruled the earth during this period, Dinosaurs were the most
dominant race on the land. Notable among them were the Theropods -- the dinosaurs
that hunted on two legs and were mostly carnivores. Reptiles were also the most
dominant race in the ocean. Two such reptiles were Plesiosaurs and Ichthyosaurs.
And when it came to sky, the supreme flying creature was once again another
reptile: Pterosaurs.
</p>
</body>
</html>
The linked CSS file ("padding_margin.css") specifies different padding values for the above two paragraphs. Here it is.
#id_jurassic {
border-style: solid;
border-width: thin;
padding: 16px;
}
#id_reptiles {
border-style: solid;
border-width: thin;
padding: 40px;
}
The output of the above HTML page shows different padding for the two paragraphs. By the way, we keep the border-width to illustrate the padding since the padding sits beneath the border.
Figure: Box Padding
Our second example shifts the focus to the margin property and specifies different margins for the two paragraphs. We reuse the earlier HTML file but simply change the CSS file ("padding_margin.css").
#id_jurassic {
border-style: solid;
border-width: thin;
margin: 16px;
}
#id_reptiles {
border-style: solid;
border-width: thin;
margin: 40px;
}
The output (see below) shows that the two paragraphs have different margins -- recall that the margin is the outer space beyond the border.
Figure: Box Margin
More Specific Properties
The above two properties (padding and margin) also come in more specific flavors! These variants apply to different four sides of the box. For the sake of completeness, we provide them here.
Property: padding-right
Property: padding-bottom
Property: padding-left
Property: margin-right
Property: margin-bottom
Property: margin-left