CSS Margin | CSS Padding | CSS Box Model

CSS Margin

CSS Margin property is used to define the space around elements. It is completely transparent and doesn't have any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate properties. You can also change all properties at once by using shorthand margin property.

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values:

• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

See the Pen CSS Margin by PANKAJ (@pankkap) on CodePen.

Shorthand Property

This method uses a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in the one place. This method is quicker. It also uses less code than the previous method. Actually, it's the same property that we used in our first example (i.e. the margin property). The only difference is that we apply multiple values against it. You don't need to provide different values for all four sides. You can provide one, two, three, or four values. Here's how it works:

margin:10px;

• All four sides have a margin of 10 pixels.

margin:10px 20px;

• Top and bottom have a margin of 10 pixels.
• Right and left have a margin of 20 pixels.

margin:10px 20px 30px;

• Top is 10px
• Left and right are 20px
• Bottom is 30px

margin:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px

See the Pen CSS Margin-Shorthand by PANKAJ (@pankkap) on CodePen.

 

CSS Padding

CSS Padding property is used to define the space between the element content and the element border. It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property. If you don't want the same padding settings to be applied to all four sides, or if you want each side to have different padding, you can use the following properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

See the Pen CSS Padding by PANKAJ (@pankkap) on CodePen.

Shorthand Property

The padding property is shorthand for padding-top, padding-right, padding-bottom, and padding-left. Again, as with margin, you don't need to provide different values for all four sides. You can provide one, two, three, or four values. Here's how it works:

padding:10px;

• All four sides have padding of 10 pixels.

padding:10px 20px;

• Top and bottom have padding of 10 pixels.
• Right and left have padding of 20 pixels.

padding:10px 20px 30px;

• Top is 10px
• Left and right are 20px
• Bottom is 30px

padding:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px

See the Pen CSS Padding- Shorthand by PANKAJ (@pankkap) on CodePen.

 

CSS Box Model

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page. These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding padding, border, and margin areas.

The following diagram demonstrates how the width, height, padding, border, and margin CSS properties determine how much space an element can take on a web page.

 

Content Area: This area consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.

Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.

Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of border.

Margin Area: This area consists of space between border and margin. The dimensions of Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors. It will not be counted for total element width and height. 

Padding is the transparent space between the element's content and its border (or edge of the box, if it has no border), whereas margin is the transparent space around the border. Also, if an element has the background color it will be visible through its padding area. The margin area is always remain transparent, it is not affected by the element's background color, however, it causes the background color of the parent element to be seen through it.

div {

  width: 400px;

  height: 100px;

  padding: 20px; /* set padding for all four sides */

  border: 6px solid black; /* set border for all four sides */

  margin: 20px; /* set margin for all four sides*/

}

According to the box model, the total width of an element can be calculated using the following formula:

Total Width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

In comparison, according to the box model, the total height of an element can be calculated using the following formula:

Total Height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

 

The box model broken down, including a base height and width plus paddings, borders, and margins

Using the formulas, we can find the total height and width of our example code.

Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px

Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

The box model is without question one of the more confusing parts of HTML and CSS. We set a width property value of 400 pixels, but the actual width of our element is 492 pixels. By default the box model is additive; thus to determine the actual size of a box we need to take into account padding, borders, and margins for all four sides of the box. Our width not only includes the width property value, but also the size of the left and right padding, left and right borders, and left and right margins.

So far a lot of these properties might not make a whole lot of sense, and that’s all right. To clarify things, let’s take a close look at all of the properties—width, height, padding, border, and margin—that go into forming the box model.

If you don't want to include the margin area, you can use the box-sizing property.

• box-sizing: border-box will cause the box-model to use only the content, padding and border area.
• box-sizing: content-box will count only the content area without the padding, border and margin area.
• box-sizing: padding-box will use only the content and padding area.

Important Note: Margin between two elements will be shared, largest margin among them will be used.

Using Developer Tools available in Chrome & Firefox

Both Chrome and Firefox provide the feature of Device Simulation in their DevTools.

Listed below are the steps to inspect element on Android:

1. Press F12 to start DevTools (Applicable for both browsers)
2. Click on the Toggle Device Bar option