Difference Between Padding vs Margin in CSS

byCrack Job •November 12, 2023

0

Difference Between Padding vs. Margin in CSS

CSS (Cascading Style Sheets) is one of the most popular computer programming languages explicitly designed with the stylization of markup in mind. CSS is used with HTML to bring color schemes and other visual elements to life. CSS allows developers the ability to define the formatting and style of a website's layout, logo, fonts, padding, and more.

In web app development and design, the margin of an element represents the outside space of the element itself, while the padding represents the inner space surrounding the element.

CSS Padding

Padding is the space between the content and the border of an element. Padding is valuable in making additional space inside an element, keeping it at a set distance from other aspects of a website. Using padding is extremely beneficial when you need to separate text boxes and images while also keeping them aligned.

Padding is used to add space around an element's content, inside of any defined borders. CSS has properties for specifying the padding for each side of an element.

Values of Padding

The padding properties can have the following values:

inherit: It specifies that the margin should be inherited from the parent element
fixed length: It specifies a margin in px, pt, cm, etc.
% length: It specifies a margin in % of the width of the containing element

Please note that any negative values are not allowed here.

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
  }

Shorthand Padding Property:

The padding property is a shorthand property for the individual padding properties (top, right, bottom, left). To shorten the code, it is possible to specify all the padding properties in one property. If the padding property has four values:

div {
    padding: 25px 50px 75px 100px;
}

However, if you want to edit the padding from the bottom of a page then:

div { padding-bottom: 10px; }

Setting Multiple Padding Property

It is also possible to apply more than one padding value to an element. If you choose to incorporate more than one padding value into an element, keep in mind that they will load and be displayed based on the following system:

One Padding Value: If the padding property has one value, All four padding are set to the same value. When you want to set the padding to the same amount on all sides, you can use the simplified padding property rather than specifying each side individually.

p { margin: 25px; }

Two Padding Value: When using two padding values, it will apply to both the top & bottom as well as the right & left of an element simultaneously. In the below example, 25px is set for top and bottom while 50px is set for right and left.

p { margin: 25px 50px; }

Three Padding Values: When using three padding values, it will apply to the top, left & right (together), and the bottom of an element. In the below example, 25px is set for, 50px is set for right and left while 75px is set for bottom only.

p { margin: 25px 50px 75px; }

Four Padding Values: When using four padding values, all four padding values will apply individually, starting at the top and working their way to the right, bottom, and left. The padding property is a shorthand property for the individual padding properties (top, right, bottom, left). If the padding property has four values:

p { padding: 25px 50px 75px 100px; }

source: blog.hubspot.com

CSS Margin

Margin is the space around the border of an element. The margin surrounding an element will inform the web browser being used of how much space should be left between independent elements and the external margin of the website's page. Margins can also be used to keep different elements an equal distance apart.

The CSS margin properties are used to create space around elements, outside of any defined borders. Each HTML element you implement into your website has four margins that can be edited and formatted. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Values of Margins

A margin property can have the following values:

auto: The browser calculates the margin. You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
inherit: It specifies that the margin should be inherited from the parent element
fixed length: It specifies a margin in px, pt, cm, etc.
% length: It specifies a margin in % of the width of the containing element

Please note that any negative values are allowed here. Remember that the number you set will be the number of pixels the element appears from said designation.

If all the four margins of HTML elements include: left, top, right, and bottom.

p {
    margin-top: 100px;
    margin-bottom: 180px;
    margin-right: 150px;
    margin-left: 80px;
  }

Shorthand Margin Property:

To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for individual margin properties (top, right, bottom, left). Please note that the order matters here: [1. top, 2. right, 3. bottom, 4. left]

p { margin: 25px 50px 75px 100px; }

However, if you want to edit just the amount of space that an element has from the bottom of a page then:

p { margin-bottom: 10px; }

Setting Multiple Margin Property

It is also possible to apply more than one margin value to an element. If you choose to incorporate more than one margin value into an element, keep in mind that they will load and be displayed based on the following system:

One Margin Value: If the margin property has one value, All four margins are set to the same value. When you want to set the margin to the same amount on all sides, you can use the simplified margin property rather than specifying each side individually.

p { margin: 25px; }

Two-Margin Value: When using two margin values, it will apply to both the top and bottom as well as the right and left of an element simultaneously. In the below example, 25px is set for top and bottom while 50px is set for right and left.

p { margin: 25px 50px; }

Three Margin Value: When using three margin values, it will apply to the top, left & right (together) and the bottom of an element. In the below example, 25px is set for, 50px is set for right and left while 75px is set for bottom only.

p { margin: 25px 50px 75px; }

Four-Margin Value: When using four margin values, all four margin values will apply individually, starting at the top and working their way to the right, bottom, and left.

p { margin: 25px 50px 75px 100px; }

Padding vs Width Property

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (CSS box model).

CSS Box Model | Source: blog.hubspot.com

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

  div {
    width: 300px;
    padding: 25px;
  }

Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding).

However, to keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

Margin Collapse

Sometimes two margins collapse into a single margin. The top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

However, this does not happen on left and right margins! Only the Top and Bottom margins are collapsible.

h1 { margin: 0 0 50px 0; }  
h2 { margin: 20px 0 0 0; }

Here the H1 element has a bottom margin of 50px and the H2 element has a top margin set to 20px. So the vertical margin between the h1 and the H2 would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.

Padding vs. Margin in CSS

Padding is used to change the size of an element and the space between the border and the element. Margin is used to adjust the element positioning and distance between the elements.

Wrap Up

The padding is the space between the content and the border, whereas the margin is the space outside the border. Margin is applied to the outside of your element hence affecting how far your element is away from other elements.

Padding is applied to the inside of your element hence affecting how far your element's content is away from the border. Also, using a margin will not affect your element's dimensions whereas padding will affect your element's dimensions.