CSS Box Model

The CSS box model looks at all the HTML elements as boxes. We can set several properties for these boxes like width, height, border, and border radius to name some. There are four important parts of a box i.e. the content of the box (where text and images appear), the margin, the border, and the padding.

Setting width and height

When we set the width and height of a box, we just set the width and height of the content area. The width and height of the box are calculated as:

Width of the box = width + left border + left padding + right padding + right border

Height Of the box = height + top border + top padding + bottom padding + bottom border

Note: Although the margin affects the total space taken up by a box on the page, it is not counted toward the actual size of the box.

Padding

Padding is the space between the border of a box and any content contained within it. It is used to push the content away from the border to increase readability.

To apply padding individually to all four sides of a box, we have the following padding properties:

• padding-top: It sets the height of the padding area on the top of an element.

• padding-right: It sets the width of the padding area on the right of an element.

• padding-bottom: It sets the height of the padding area on the bottom of an element.

• padding-left: It sets the width of the padding area on the left of an element.

To specify all of the above four properties in a single line, there is a shorthand property padding :

1. padding: 10px;

   If one value is specified, it sets the padding for all four sides in clockwise order, starting from the top.

2. padding: 10px 10px;

   If two values are specified, the first value sets the top and bottom padding while the second value sets the right and left padding.

3. padding: 5px 10px 15px 20px;

   If all four values are specified, padding is set in the clockwise order starting from the top.

Note: Negative values for padding are not allowed.

Border

The border property is used to set the border between the margin and padding of an element.

e.g. border: 1px solid black;

There are four borders and the border property is a shorthand for setting border width, border style, and border color.

• border-width: It is used to control the width of a border.

• border-style: It is used to control the style of a border and has values like solid, dashed, dotted, double, etc.

• border-color: It is used to specify the color of an element's border by using RGB values, hex codes, or color names.

To set the border individually for each side, we have the following properties:

• border-top: It sets border-width, border-style, and border-color of an element's top border.

• border-right: It sets border-width, border-style, and border-color of an element's right border.

• border-bottom: It sets border-width, border-style, and border-color of an element's bottom border.

• border-left: It sets border-width, border-style, and border-color of an element's left border.

There is one more property widely used to define the radius of the element's corners which is the border-radius. It is used to add rounded corners to elements.

1. border-radius: 15px 40px 30px 10px;

   If all four values are specified, the first value applies to the top-left corner, the second value to the top-right corner, the third value to the bottom-right corner, and the last value to the bottom-left corner.

2. border-radius: 15px 30px;

   If two values are given, the first value applies to the top-left and bottom-right corners while the second value applies to the top-right and bottom-left corners.

3. border-radius: 15px;

   If only one value is specified, the value applies to all four corners.

Margin

The margin property is used to control the gap between the boxes and it pushes other elements away from the box. We can set individual margins for an element using the following properties:

• margin-top: It sets the margin on top of the element.

• margin-right: It sets the margin on the right of the element.

• margin-bottom: It sets the margin on the bottom of the element.

• margin-left: It sets the margin on the left of the element.

We can set all these properties in a single line using a shorthand property margin:

• margin: 24px;

  If one value is specified, the same value is applied on all four sides in clockwise order: top, right, bottom, and left.

• margin: 12px 24px;

  If two values are specified, the first is for the top and bottom while the second is for the right and left.

• margin: 5px 10px 15px 20px;

  If all four values are specified, clockwise order is obeyed.

Margin Collapse

When two margins from different elements overlap, the equivalent margin is the greater of the two. This is known as margin collapse.

For example, we have two paragraphs. The first paragraph has a bottom margin of 30px and the second paragraph has a top margin of 70px. The actual margin between them is 70px and not the sum of both margins.

Box Sizing

The box-sizing property determines whether padding and border is included in an element's width and height or not. It has two values:

• box-sizing: content-box;

  This is the default value for any element. The width and height of the box do not include the padding and border.

• box-sizing: border-box;

  The width and height property of a box includes the content, the padding, and the border (but not the margin).