Design Use of Space Around Edges of Window

Updated 2/5/2020

When you start designing, you'll hear the words "margin" and "padding" thrown around a lot. Pretty quickly you'll understand that what is being referred to is the space between elements. At first, these two words might be confusing since they both have to do with the same thing. However, there are important differences and, once you understand them, you'll be able to make better design decisions.

Margin

Margin is the space between the border and the next element of your design. Think of the space outside the border and between it and the other elements. This is all the margin. Margin goes around all four sides of the content and you can target and change the margin for each side.

Padding

Padding is the space that's inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side (just like a margin).

An Image of the Difference Between Margin and Padding

The easiest way to understand the difference between margin and padding is through the image below. It demonstrates what each part of something (like a paragraph element) looks like.

The Box Model in CSS

The image above is also referred to as the "box model" and is used when dealing with CSS. It's important to understand how the box model works, so you can understand how the width and height of your elements work.

When you set the width and height of an element, it's just for the content area. You'll probably have to do some math to make sure your elements are lining up correctly, because of the margin and padding.

Something important to note for beginners is that margin and padding can get confusing because they will still be parts of your element even if you don't include a border.

In the image below, we have two blocks of content with no additional border. You can see how the margin and padding are still valid.

The Coding Difference Between Margin and Padding in CSS

When developing, there are some differences in coding margin and padding when you're using CSS to style the HTML.

How to Add Margins in CSS

Four margins need to be declared if they are not to collapse onto each other:

1. Margin-top

2. Margin-right

3. Margin-bottom

4. Margin-left

So that you don't have to set all four margins individually, the margin property allows you to set them all in one declaration. If you want a different margin length or percentage for one or more margin, it can be done so individually.

For example, if you want 30 pixels on the top, 75 pixels on the right, 45 pixels on the bottom, and 100 pixels on the left, you'd use:

p {

 margin: 30px 75px 45px 100px;

}

Note: The order goes around the element clockwise.

To use a percentage in CSS, it must be a percentage of the inline size of the parent so you get equal-sized margins on all sides.

A common problem when developing margins is margin collapsing. When a heading has a bottom margin that is followed by a paragraph with a top margin, the margin collapses to combine. This makes it so the space between two elements becomes larger. Essentially, the smaller margin ends up inside the larger margin.

There are a few ways to prevent margin collapsing from happening, but perhaps the two most common solutions are the following:

1. Block Formatting Context (BFC): This will prevent margin collapsing by containing the element.

2. Flex and Grid Containers: This establishes formatting contexts for its contents.

How to Add Padding in CSS

The same basic coding is used for padding in CSS as for margins, except the term "padding" replaces the term "margin."

1. Padding-top

2. Padding-right

3. Padding-bottom

4. Padding-left

Each padding property can have the length, %, and inherit specified. Otherwise, using the padding property allows you to set all sides in one declaration.

For example:

div {

  padding: 20px 25px 50px 75px;

}

Note: The order goes around the element clockwise.

Learn More About Coding in CSS

Now that you've learned the difference between padding and margin in CSS, are you ready to learn more? Pluralsight offers a variety of CSS courses and other resources that will give you an edge in your career.

Get started today!

Design Use of Space Around Edges of Window

Source: https://www.pluralsight.com/blog/creative-professional/whats-difference-margin-padding

Share this post