Ever wanted to get the best discounts? Get up to 20% off. View offers

CSS and HTML 5


Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.



Margin vs Padding in HTML and CSS: Differences and How to Use

Posted in CSS, HTML 5
Margin vs Padding

In HTML and CSS, margin and padding are two methods of ensuring that the proper spacing is placed around an element. Elements such as DIVs, SPANs, Ps, and IMGs have both a margin and padding attribute.

But while they’re similar, the margin padding differences are important. In fact, it’s a question that may frequently come up in CSS interviews.

Let’s take a look at a simple diagram:

CSS Graphics

In the above example, you can see that an element is composed of layers. Within those layers are the content of the element, a border, the padding, and then the margin.

Today, we’re going to take a deeper look at the differences between margin vs padding, how you use margin and padding, and how to tell when to use them.

What is the Difference Between Margin vs Padding?

Let’s begin with a crucial difference between padding and margin. A margin is the space around an element, while padding is the space inside of an element. You use a margin to ensure that other elements aren’t too close to the element in question. You use padding to make space inside of the element itself.

Let’s start with some simple source code. We’re going to create two boxes; an outer box and an inner box. The outer box will contain the inner box.

Outer Box

Both these boxes currently have default padding and default margin, which looks like this:

.outerBox {

padding: 0px;

margin: 0px;

}

You can see that the image below has no padding throughout; it’s just the “content” of the box, as well as a border.

Now, let’s change the inner box’s margin to 20px.

.innerBox {

margin: 20px;

}

Here are the results:

As you can see, 20 pixels have been added around the inner box and its border. It actually made the outer box bigger, not the inner box.

Now let’s change the inner box’s padding to 20px.

.innerBox {

margin: 20px;

padding: 20px;

}

We update the results:

Outer Box

Now the inner box has 20 pixels added inside of its border as well as outside of its border. Adding the padding made the inner box bigger.

Visually, if we removed all the borders, “margin” and “padding” would operate very similarly. They would all denote space between the content inside the div and the content around the div.

But “margin” will always denote space outside of the div, whereas “padding” will always denote space inside the div — it’s that simple.

Margin refers to the space just beyond the content and the border. Padding refers to the space between the content and the border.

When to Use Margin vs. Padding

While visually margins and padding may seem similar, there’s an important distinction — a margin doesn’t count as part of the element itself, whereas padding does.

If you were to click on the padding of an element, it would still register as clicking on that element. But if you were to click on the margin, it wouldn’t. This is the most important distinction between margins and padding.

Both margins and padding are generally used to create white space around elements to make them more readable:

no margin

In the above passage, padding isn’t set, and the border is uncomfortably close to the text.

with margin

Now that the above padding is set, the text feels more readable.

Likewise, let’s say that we added an H2 heading, but we wanted it to have a red banner:

Padding

The background cuts off very close to the letters because there’s no padding. Let’s add 10px of padding:

CSS 5

The padding gives the heading text more space to breathe.

And this highlights another important difference in padding vs margin. The margin would have only added space around the H2 — it wouldn’t have helped with the background color because the background color is only applied within the element, not outside of the element.

Left, Right, Top, and Bottom Margin vs Padding CSS

In our above examples, we changed the entire margin or padding attribute at once. But you may have noted that both margins and padding go all the way around the element.

Both margins and paddings can be set based on the left, right, top, and bottom of the element. This is true regardless of the element for which you’re using margin and padding — whether it’s a DIV, a P, an IMG, or something else entirely.

Let’s take a deeper look:

CSS 3

In this example, we’ve set the top padding to 20px, the bottom to 10px, the left padding to 0px, and the right padding to 5px. You can see that the spacing is different in each case. You have complete control over both padding and margins.

We could also set the padding and then override it in one direction:

CSS 2

In this example, we set the padding to 20px everywhere and then overrode that setting to set the bottom padding to 0px. We might do this if we had an element that was to follow very closely after the paragraph.

Similarly, we can add a button to the text and update its margin:

CSS Graphics

In the above example, note that the entirety of the in-line text was moved downward when we set the button’s bottom margin to 20px. Because the button is in-line with the text, the entire element is considered.

Margin and Padding Sizes in CSS

In our examples so far, we’ve been using pixels. But as with other CSS elements, you can use a variety of padding sizes.

Here’s a margin of 20px (20 pixels):

margin 4

Now here’s a margin of 10 percent:

margin 3

Here’s a margin of 0.2in (0.2 inches):

margin 2

And here’s a margin of 8pt (8 points):

margin 1

Pixels are a precise method of measurement. But many also use percentages because they make it easier to achieve a responsive design (a design that can be adjusted by the screen size).

Margin Padding in HTML vs. CSS

So far, we’ve looked at margin and padding in CSS. To set margin and padding in CSS, you add the appropriate attributes to an element.

You can do this in-line:

<div style=”margin: 20px; padding: 20px”></div>

Or you can do this in a separate stylesheet:

.myDiv {

margin: 20px;

padding: 20px;

}

But how did people set margin and padding before CSS even existed? How would you set margin and padding in HTML?

To set margin and padding in HTML, you would instead need to create an HTML table. Tables are somewhat uncommon now, but can still be created like so:

<table>

<tr>

<td></td>

</tr>

</table>

Each “tr” element represents a row, and each “td” element represents a cell within that row.

In HTML, tables support cellpadding (padding) and cellspacing (margins). But there are some major issues; namely, the rows and columns of the table must remain connected to each other. So, tables aren’t good for responsive design — the rows and columns can’t adjust to different screens effectively.

HTML doesn’t have other margin support; otherwise, you have to do it all in CSS. In HTML, the primary method of creating margins was simply by adding “breaks” (<br> tags).

Margin Padding in HTML vs CSS

Compared to HTML, padding vs margin CSS is very simple. HTML padding vs margin is more complex, because you either need to put everything inside of a table or size everything correctly from the start.

Today, almost everything is done in CSS stylesheets because it’s much easier. CSS can be incorporated directly into HTML or can be saved on a separate, external stylesheet (.CSS).

Margin Collapse and CSS

A common issue in CSS is “margin collapse.” In CSS, margins can “collapse” into each other. In other words, if two margins butt up against each other, the CSS will collapse one margin and keep the larger margin. This isn’t an issue that happens with padding.

Here, we have two paragraphs both with 20px of padding:

Margin Collapsed Part 1

Now we have two paragraphs, both with 20px of margin:

Margin Collapsed Part 3

This is where something interesting occurs. You’ll note that while there’s 20px around the two paragraphs, there’s also 20px between the two paragraphs, though it should be 40px (doubled).

This is made more apparent when we change the margin of the second paragraph to 10px:

Margin Collapsed Part 3

The second paragraph now has a 10px margin to its left and right, but the margin between the two paragraphs has not changed. CSS will continue to set the margin at the greater amount: 20px.

Why does CSS do this? Margin collapse is intended to improve readability by ensuring that “double margins” don’t occur. But for designers who don’t want their margins to collapse, it can be frustrating.

Generally, margin collapse will only occur vertically because it’s designed to enhance the readability of text. The easiest way to prevent a margin collapse is to place a “dummy” item between the elements, such as an empty paragraph.

Another way is to use absolute positioning for your items. But absolute positioning isn’t always an option, especially if you’re trying to create a responsive design.

Margin and Padding in Bootstrap

Many developers rarely access margin or padding directly because they’re using technology such as Bootstrap. Bootstrap is a popular CSS framework designed for quick site development. It’s not the only framework out there, but most work similarly.

In Bootstrap, formed utility classes make it easier to apply styles like padding and margins. For instance, you might use:

<div class=”margin-md”></div>

This would create a DIV with a medium-sized margin. You could also use:

<div class=”padding-sm”></div>

This would create a DIV with small-sized padding.

Bootstrap is frequently used today for responsive web design. It’s a column-based system with deep controls for each element on the page, so pages can operate smoothly regardless of how small or large the screen is.

If you’re using Bootstrap, you shouldn’t try to set margin or padding directly; instead, you should let Bootstrap do it for you through its utility classes.

Borders Between Margins and Padding

In CSS, the border forms a sort of “wall” between the margin and padding. But borders are unique style elements that shouldn’t be used as either. A border can have a color, style, and width. It will always sit between the margin and padding.

In terms of elements, borders function more like padding than a margin. The border of an element counts as part of the element, so if you have a tooltip, for instance, the tooltip will turn on once you hit the border — it won’t turn on once you hit a margin.

FAQs: Margins vs Padding

Is it Better to Use Margin or Padding?

Use a margin when you want to adjust the spacing of an element and use padding when you want to adjust the appearance of the element itself. Margins aren’t a part of the element; padding is.

How Do You Remember Margin vs Padding?

Remember that margins are outside of the border and padding is inside of the border. The border attribute creates a wall between the two.

Learning More About Margin and Padding in CSS

Now you know the differences between margin and padding in CSS and HTML. To reiterate:

  • Margin refers to the white space surrounding an element such as a DIV, SPAN, or P.
  • Padding refers to the white space within an element such as a DIV, SPAN, or P.

In CSS, both margin and padding can be set as such:

margin: 10px;

padding: 10px;

In HTML, you need to use tables:

<table cellspacing=20px cellpadding=20px></table>

CSS provides for granular control of many attributes throughout an HTML/CSS page. If you need to modify something on an HTML page, there’s almost guaranteed to be a CSS attribute to do so. Now that you have expanded your knowledge of margin vs padding in CSS and HTML, consider taking an HTML/CSS course, undergoing an intensive HTML/CSS boot camp, or just referring to a CSS cheat sheet.

 

Recommened HTML/CSS Courses from Udemy!

HTML Course

People are also reading:

Jenna Inouye

Jenna Inouye

Jenna Inouye has been a full stack developer for two decades, specializing in web application design and development. For the last eight years, she has worked as a news and feature writer focusing on technology and finance, with bylines in Udemy, SVG, and The Gamer. View all posts by the Author

Leave a comment

Your email will not be published
Cancel
TODAY'S OFFERS
close

Select from the best sales here

VIEW ALL DISCOUNTS