If you’re new to CSS, you might have heard the words “margin” and “padding” but are not quite sure what they mean or how to use them in your website designs.

The concepts have to do with the same thing in CSS, however, there are important fundamental differences in their usage. Once you fully understand them, you’ll be equipped to make better design decisions.

Free Intro Guide to HTML & CSS [Download Now]

What’s the Difference Between Margin and Padding in CSS?

Basically, a margin is the space around an element and padding refers to the space between an element and the content inside it.

margin vs padding in css

Source

The margin falls outside two adjacent elements. Each side of the element has a margin size you can change individually. In creating the gap, the margin pushes adjacent elements away.

On the other hand, padding is placed inside the border of an element. To create the gap, the padding either grows the element’s size or shrinks the content inside. By default, the size of the element increases.

If you want to create the gap by shrinking the content, set the box-sizing property value to border-box (i.e. box-sizing: border-box).

When Should You Use Margins vs. Padding?

When you’re adjusting the layout of your design, you’ll need to determine whether to adjust the margins or the padding to achieve the desired visual effect. 

CSS margins determine the space surrounding an element, therefore margins would be used to move an element up or down on the page, as well as left or right. If the width of your page is fixed, centering an element horizontally is very simple: just assign the value margin: auto

You would also use margins to set the distance between nearby elements. For instance, use margins to add space between images or between an image and the text description below it. 

On the flip side, a negative margin value would let you overlap elements. You could also use a negative margin to create a header element within a container that has padding values set to keep other elements aligned. 

CSS padding determines how elements look and sit within a container. You would change the padding if you want to create space between an element and the edge of the container, or the border. This would also show the container’s background around the element inside it.  

Padding is also used to change the size of an element. When you increase the padding value, the text will stay the same size, but there will be more space around it. The element will also fill more space inside the container.

The CSS Box Model

In CSS, the box model is used for page design and layout. Essentially, every HTML element in a document is wrapped inside a box.

A CSS box consists of the margin, border, padding, and content — as shown below:

css box model

Source

Applying height and width to your elements will be easier once you understand the CSS box model. To ensure proper alignment, you’ll just need to do some simple math. However, if you’re confused about how the box model works, you could end up with a sloppy layout.

CSS Margin vs. Padding vs. Border

Margin and padding are always parts of an element, even if there’s no visible border. This can get confusing for beginners.

This image illustrates such a scenario:

CSS Margin vs Padding vs Border

Source

The two blocks of content don’t have a border, but the margin and padding still apply.

Now, let’s look at the difference between the margin and padding CSS codes.

How to Add Margins in CSS

Each element has four margins to be declared: top, right, bottom, and left.

To set the margin area for a side of an element, use margin-top, margin-right, margin-bottom, and margin-left properties respectively. You can also set the margin on all four sides using the shorthand property margin.

You may specify the margin property with one, two, three or four values depending on the side you want to apply it to. If you want even margins on every side, you’ll only need to apply one value. Otherwise, the order of the values is crucial: 

  • Four values apply to the top, right, bottom, then left. 
  • Three values apply to the top, right and left, then bottom.
  • Two values apply to the top and bottom, then right and left.

Each value is represented as <length> (which defines a fixed value for the margin), <percentage> (which defines it as a percentage of the width of the container), or auto (which lets the browser set the margin).


How to Add Margins in CSS
add margins in css

Source

How to Add Padding in CSS

Like in margins, the padding area has four sides to be declared: top, right, bottom, and left.

To set the padding, use padding-top, padding-right, padding-bottom, and padding-left properties. Alternatively, you can use the shorthand property padding.

When using the shorthand property, you may define the padding using one, two, three or four values as follows. As with margins, one value will apply on all four sides. Otherwise, the order the values are written will determine which sides each applies to:

  • Four values apply to the top, right, bottom, then left.
  • Three values apply to the top, right and left, then bottom.
  • Two values apply to the top and bottom, then right and left.

Each value may be represented as <length> (which defines it by a fixed value) or <percentage> (which defines it as a percentage of the width of the container).

How to Add Padding in CSS
Add Padding in CSS

Source

Final Thoughts

To space out elements in CSS, you’ll typically use the margin and padding properties. Understanding the difference is a step toward mastering CSS. Now you know how to set the margin and padding using the shorthand property, which is much quicker than defining each side independently.

In web design and web development, HTML and CSS go hand-in-hand. HTML defines content structure and semantics, while CSS establishes styling and layout. If you’re a beginner, we recommend becoming fully acquainted with HTML before attempting CSS. Keep going back to HTML as you learn CSS until you fully understand HTML. Once you’ve applied CSS, HTML becomes much more interesting.

New Call-to-action

 css introduction

Originally published Apr 24, 2020 11:28:41 AM, updated April 29 2020

Topics:

CSS Animation