Padding vs Margin: what’s the difference in CSS?

When editing a website with CSS, the most commonly used properties for spacing elements on a page are padding vs. margin. For beginners, these terms may seem confusing. Also, if applied incorrectly, they can lead to messy web design.

The main difference between CSS padding and margin is that padding is the space between the content and the element’s border (within the element itself), while margin is the space around an element’s border.

Therefore, this guide will explain in more detail the difference between padding vs margin, how they work, and how to implement them in CSS. Also, additional tips are provided at the end of the article to help you use them correctly.

Padding vs Margin: What are they and when to use them?

Both padding and margin are used to customize the layout of a website. However, each has its own purposes and functions.

padding

The padding property is what creates the space or area around the content of an element. It consists of the top, right, bottom and left padding. In CSS they are written as padding-top:, padding-right:, bottom-padding: Y padding-left:. Their default values ​​are 0.

To add padding to an element, you can set the values ​​to:

  • Length: a fixed value, usually in px, pt or cm.
  • Percentage: the size of the padding is relative to the width of the element.
  • Inherit: sets the CSS padding properties to follow the parent element.

Note that you cannot use auto and negative values ​​for padding.

This is an example of standard padding:

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

The padding has a shorthand property: padding:. Simplify the above code to a single line code. This is to avoid having a long CSS file, which can slow down your site’s load time.

The padding shorthand property can have one to four values:

  • four values: when you need to specify the values ​​of the top, right, bottom and left padding. The code above, for example, could be written as:

padding: 30px 50px 30px 50px;

  • three values: If the left and right padding are the same length, you can merge the left and right values ​​into one. So the code would be:

padding: 30px 50px 30px;

  • two values: The first value determines the top and bottom padding while the second value sets the left and right padding:

padding: 30px 50px;

  • A value: when you want to specify a length on all four sides of the padding. For example:

padding: 30px;

Note that when you set the width of an element, the paddings will be added to the total width. Look at the following example:

See also  How to make a responsive website: 10 tips

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

The total width of the element is 300px, that is 250px plus 25px right padding and 25px left padding. If you want an element to have a specific width, consider the length of the padding.

Use padding when you don’t want the content of an element to touch the edges of its container. You can also use it to increase and decrease the size of web parts.

Let’s take the “Buttons” element as an example. Padding is the area that surrounds the button label or text. When you edit the padding, it will affect the size of the button because you will have more or less space around the text.

margin

The margin property is the outermost layer of a web part. In other words, it creates a space around the element. The property consists of margin-top:, margin-right:, margin-bottom: Y margin-left:.

Like padding, margin can be set to length, percentage, and legacy values. However, it also supports:

  • Auto: The browser will calculate an appropriate margin value to use. Typically you will center the web part.
  • negative values: Brings items closer to their neighbors.

The standard margin code is:

div { margin-top: 100px; margin-right: 25px; margin-bottom: 100px; margin-left: 25px; }

In CSS, the margin also has a shorthand property: fringe:. It is determined by the number of values ​​as well:

  • four values: if you want to determine the four sides of the margin. For example:

margin: 100px 25px 100px 25px;

Remember to type the values ​​in order from the top and then move clockwise to the left.

  • three values: Applicable when the left and right margins have the same value:

margin: 100px 25px 100px;

  • two values: the first value applies to the top and bottom margin while the second value refers to the right and left margin:

margin: 100px 25px;

  • A value: when you want all four margins to be the same length. For example:

margin: -30px;

To autofit the margin, simply write the code:

div { width: 250px; margin: auto; }

This will horizontally center the element within its container. In other words, the element will occupy the specified width and the remaining space will be divided equally between the left and right margins.

Use a margin when you want to move items up, down, left, right, or center them. The distance between elements is also the work of the margins. Aside from that, margins can also be used to overlay elements.

See also  Complete guide to optimize images and improve web performance

For example, with the image element, you can use a margin to place another image on top of it. You can also set a specific distance between the image and a text box.

CSS Padding vs Margin vs Border: What’s the Difference?

Padding is a CSS property that works only on elements that have borders. Creates the space between the border and the content of an element. So keep in mind that padding has no effect on elements that don’t have borders.

Margins form the space outside the borders of elements. Unlike padding, margins can affect an element whether or not it has a border.

Another difference is that the background color of the padding and borders can be customized, while the margins are transparent. They will display the background color of the website theme.

The CSS box model

Each web page is made up of rectangular content blocks. These are arranged above, below and next to each other. These blocks are what we call elements.

The CSS box model is basically a container or box that wraps each HTML element. It consists of:

  • content box: The area where your content is displayed, such as texts and images.
  • padding box: is the space surrounding the content area.
  • border box: refers to the container between the padding and the margin or the box that surrounds the element.
  • margin box: the outermost layer or invisible space outside the border.
  • Width: refers to the width of an element’s content area. Its value is 100% by default, but a defined width can be set.
  • Height: Usually based on the length of the content, but it is also possible to set a specific height.

Here is the code for a standard CSS box model with its preview:

{ width: 250px; height: 100px; margin: auto; padding: 20px; background-color: cyan; border: 5px solid blue; }

How to add padding in CSS?

The following tutorial will show you how to add padding to a header element in a WordPress post.

  1. In the control Panel of WordPress, hover over Appearance and select Personalize.
  1. Click on the page or post you want to edit. Then scroll down the side menu and click on the tab Additional CSS.
  1. Enter the padding values ​​for the H1 element. For example:

h1 { background-color: beige; padding: 20px 100px; }

  1. Save the changes.

How to add margin in CSS?

Follow the steps below to add margins to an image element in a WordPress post.

  1. go to control Panel of WordPress -> Appearance -> Personalize.
  2. Select the post you want to edit. Find and click the tab Additional CSS from the side menu.
  1. Write the margin value for the image element. For example:
See also  How to set up email on Android

img { margin: -20px 5px; }

  1. Save the edits.

Tips for using padding and margin

Different content elements may work better with padding or margin. So keep that in mind when choosing between the two. Here are other tips that you may find useful:

  • To add space within a column, use padding instead of margins if you’re building a responsive grid.
  • Use column padding if a web page has multiple columns that will stack vertically on a smaller screen.
  • Use the margin properties to add space around the text, image, and container elements.
  • Add bottom margins first to create consistent spacing between elements.
  • When a container is inside a column, it adds a bottom margin to the container. This will add more space when content is stacked vertically on small screens.
  • Use margins to space around buttons instead of padding as it affects button styling.
  • When you have an interactive element, use the margins to add space around it.

If manually editing a website’s layout using CSS is too much of a hassle for you, try a . It requires no coding and offers easy customization, saving a lot of time.

Also, the design you create will be automatically responsive. You won’t have to worry about making difficult design decisions around margins and padding. The website will fit perfectly on various screen sizes.

conclusion

In CSS, both padding and margin add space to web elements, but each provides different results. Padding is the space between the content of an element and the border.

On the other hand, the margin constitutes the outermost space of the element.

For beginners, it can be a bit confusing to decide which property to apply when designing your website. However, you will become familiar with them as you play and experiment.

We hope that the tips mentioned in this article have helped you understand their differences and when to use padding or margin.

Diego is a social communicator, a digital advertising specialist who is constantly working on improving his knowledge of digital marketing, focusing on content and SEO. Languages, series, books and internet courses are his main hobbies, in addition to sports.

Loading Facebook Comments ...
Loading Disqus Comments ...