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:
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.
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:
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:
In the above passage, padding isn’t set, and the border is uncomfortably close to the text.
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:
The background cuts off very close to the letters because there’s no padding. Let’s add 10px of padding:
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:
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:
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:
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):
Now here’s a margin of 10 percent:
Here’s a margin of 0.2in (0.2 inches):
And here’s a margin of 8pt (8 points):
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).
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:
Now we have two paragraphs, both with 20px of margin:
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:
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. With these new skills, you'll be able to build your own website from scratch. we recommend using NameCheap to buy a domain name and web hosting services. They're the best in the industry and super affordable.
Recommened HTML/CSS Courses from Udemy!
People are also reading:
