When to use margin vs padding in CSS

Alex Angas Source

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?



answered 9 years ago John Boker #1

Margin is on the outside of block elements while padding is on the inside.

  • Use margin to separate the block from things outside it
  • Use padding to move the contents away from the edges of the block.

enter image description here

answered 9 years ago alex #2

One thing to note is when auto collapsing margins annoy you (and you are not using background colours on your elements), something it's just easier to use padding.

answered 9 years ago pixeltocode #3

The thing about margins is that you don't need to worry about the element's width.

Like when you give something {padding: 10px;}, you'll have to reduce the width of the element by 20px to keep the 'fit' and not disturb other elements around it.

So I generally start off by using paddings to get everything 'packed' and then use margins for minor tweaks.

Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.

answered 9 years ago Frank Schwieterman #4

Here is some HTML that demonstrates how padding and margin affect clickability, and background filling. An object receives clicks to its padding, but clicks on an objects margin'd area go to its parent.

$(".outer").click(function(e) {

$(".inner").click(function(e) {
.outer {
  padding: 10px;
  background: red;

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">


answered 7 years ago Scott #5

The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.

The diagram below I think gives an instant visual understanding of the difference.

enter image description here

One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.

answered 7 years ago pavon #6

TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

To me the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't. Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element, and is always preserved. So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element. Thus content of the two elements will end up being 2em apart.

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap. So in this example you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.

This can be really useful when you know that you want say 1em of spacing around an element, regardless of what element it is next to.

The other two big differences is that padding is included in the click region and background color/image, but not the margin.

answered 5 years ago Touhid Rahman #7


  1. Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.

  2. Margin is not part of an element where padding is part of element.

Please refer below image extracted from Margin Vs Padding - CSS Properties

Margin vs Padding

answered 5 years ago stvnrynlds #8

There are more technical explanations for your question, but if you're looking for a way to think about margin & padding that will help you choose when and how to use them, this might help.

Compare block elements to pictures hanging on a wall:

  • The browser window is just like the wall.
  • The content is just like a photograph.
  • The margin is just like the wall space between framed pictures.
  • The padding is just like the matting around a photo.
  • The border is just like the border on a frame.

When deciding between margin & padding, it's a nice rule of thumb to use margin when you're spacing an element in relationship to other things on the wall, and padding when you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will typically make the element bigger1.

1 This default box model can be altered with the box-sizing attribute.

answered 4 years ago Mohammad Golahi #9

The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.

enter image description here

it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.

note that some times you have to use margin.

answered 3 years ago UUIUI #10

When to Use Margins and Padding

There are two ways in CSS to create space around your elements: margins and padding.In most usage scenarios, they are functionally identical but in truth, they do behave in slightly different ways. There are important differences between margins and padding that you should take into consideration when choosing which to use to move elements around the page. However, in those cases where either margins or padding could be used to the same effect, a lot of the decision comes down to personal preference.

When to use margins

  1. You want your spacing to appear outside of the “box” created by a border property. Margins lie outside of borders, so you’d use them if you want your border to stay in one place. This can be useful if you have, for example, a sidebar with a border that you want to move away from your main content area.

  2. You don’t want your background color or image to invade your personal space. Background colors and images stop at the border, so if you’d rather keep your backgrounds out of the space you’re making, margins are the property you want.

  3. You’d like collapsible space on the top and bottom of your element. Top and bottom margins behave differently than side margins in that if two margins are atop one another, they collapse to the size of the largest margin set. For example, if I set paragraph to have a top margin of 20 pixels and a bottom margin of 15 pixels, I’ll only have 20 pixels of space total between paragraphs (the two margins collapse into one another, and the largest wins out).

When to use padding

  1. You want all of the space you’re creating to be inside your border. Padding is contained within your borders, so it’s useful for pushing your borders away from the content inside of your element.

  2. You need your background color/image to continue on into the space you’re creating. Your background will continue on behind your padding, so only use it if you want your background to peek out.

  3. You want your top and bottom space to behave more rigidly. For example, if you set the paragraphs in your document to have a top padding of 20 pixels and a bottom padding of 15 pixels, then any time you had two paragraphs in a row, they’d actually have a total of 35 pixels of space between them.

answered 3 years ago John #11

Advanced Margin versus Padding Explained

It is inappropriate to use padding to space content in an element; you must utilize margin on the child element instead. Older browsers such as Internet Explorer misinterpreted the box model except when it came to using margin which works perfectly in Internet Explorer 4.

There are two exceptions when using padding is appropriate to use:

  1. It is applied to an inline element which can not contain any child elements such as an input element.

  2. You are compensating for a highly miscellaneous browser bug which a vendor *cough* Mozilla *cough* refuses to fix and are certain (to the degree that you hold regular exchanges with W3C and WHATWG editors) that you must have a working solution and this solution will not effect the styling of anything other then the bug you are compensating for.

When you have a 100% width element with padding: 50px; you effectively get width: calc(100% + 100px);. Since margin is not added to the width it will not cause unexpected layout problems when you use margin on child elements instead of padding directly on the element.

So if you're not doing one of those two things do not add padding to the element but to it's direct child/children element(s) to ensure you're going to get the expected behavior in all browsers.

answered 2 years ago MAChitgarha #12

It's good to know the differences between margin and padding. Here are some differences:

  • Margin is outer space of an element, while Padding is inner space of an element.
  • Margin is the space outside the border of an element, while Padding is the space inside the border of it.
  • Margin accepts the value of auto: margin: auto, but you can't set Padding to auto.
  • Margin can be set to any number, but Padding must be non-negative.
  • When you style an element, it will affect to padding also (e.g. background color), but not to margin.

answered 2 years ago Avinash Malhotra #13

CSS Margin, padding and border are Box Model properties.

  • Margin is space outside content.
  • Padding is space inside content.
  • Border is a visible outline (any color, style and width) outside padding.

Total width=content-width + padding + border.

answered 2 years ago Pulkit Anchalia #14

Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

Showing various parts

Here is the live example: (play around with changing the values) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

answered 1 year ago Alireza #15

First let's look at what are the differences and what each responsibility is:

1) Margin

The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border. With CSS, you have full control over the margins.
There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

2) Padding

The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

So simply Margins are space around elements, while Padding are space around content which are part of the element.

Margin and Padding

This image from codemancers shows how margin and borders get togther and how border box and content-box make it different.

Also they define each section as below:

  • Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
  • Padding - this clears the main content from its containing box.
  • Border - this surrounds both content and padding.
  • Margin - this area defines a transparent space that separates it from other elements.

answered 7 months ago Mostafa Osama #16


Margin is usually used to create a space between the element itself and its surround.

for example I use it when I'm building a navbar to make it sticks to the edges of the screen and for no white gap.


I usually use when I've an element inside a border, <div> or something similar, and I want to decrease its size but at the time I want to keep the distance or the margin between the other elements around it.

So briefly, it's situational; it depends on what you are trying to do.

answered 6 months ago Bjamse #17

I always use this principle:

box model image

This is the box model from the inspect element feature in Firefox. It works like an onion:

  • Your content is in the middle.
  • Padding is space between your content and edge of the tag it is inside.
  • The border and its specifications
  • The margin is the space around the tag.

So bigger margins will make more space around the box that contains your content.

Larger padding will increase the space between your content and the box of which it is inside.

Neither of them will increase or decrease the size of the box if it is set to a specific value.

answered 6 months ago saurabhgoyal795 #18

Margin is outside the box and padding is inside the box

comments powered by Disqus