What is the difference between margin and padding

Customer service software. Content management system software. Premium plans. Operations software. Connect your favorite apps to HubSpot. See all integrations.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our privacy policy. Written by Jamie Juviler WebsiteJamie. These concepts do similar things in CSS. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

Consider the element illustrated below, which has a margin of 10 pixels:. If we put multiple of these elements together, we see how margins create whitespace between them, giving them room to breathe:.

On the other hand, padding is located inside the border of an element. The element below has padding of 10px on the left and right sides, and padding of 15px on the top and bottom sides:. By default, the size of the element increases. If you want to create the gap by shrinking the content, set the box-sizing property to border-box i. CSS margins can 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 simple: Just assign the value margin: auto.

Padding - margin: auto by Christina Perricone hubspot on CodePen. Margins determine the amount of space between adjacent elements, or whitespace. Whitespace is important for making web pages visually palatable. For instance, use margins to add space between images or between an image and the text description below it:. Padding is calculated between content and border. Margin is calculated outside the border. Try putting a background color on a block div with width and height.

You'll see that padding increases the size of the element, whereas margin just moves it within the flow of the document. Padding is the space between nearest components on the web page and margin is the space from the margin of the webpage. My understanding of margin and padding comes from google's developer tool in the image attached.

In Simple words, a margin is the space around an element and padding means the space between an element and the content inside that element. Both these two are used to create gaps but in different ways. It is important to know the difference so you could know when to use either of them and use them appropriately.

It is also worthy of note that margins and padding come handy when designing a website's layout, as margin specifies whether an element will move up or down, left or right while padding specifies how an element will look and sit inside its container. Margin- is on the outside of the element i. Padding- is on the inside, the other will apply the whitespace "before" the element begins.

Margin is applied to the outside of you element hence effecting how far your element is away from other elements. Padding is applied to the inside of your element hence effecting how far your element's content is away from the border. Basically, the difference between padding and margin come in terms of the background.

Padding will decide the space between content, while margin decide the outside edge of elements! One thing I just noticed but none of above answers mentioned. If I have a dynamically created DOM element which is initialized with empty inner html content, it's a good practice to use margin instead of padding if you don't want this empty element occupy any space except its content is created.

Padding is the space between you content and the border. Where as Margin is the space between the border and the other element. How are we doing? Please help us improve Stack Overflow. Take our short survey. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Difference between margin and padding?

Ask Question. Asked 10 years, 6 months ago. Active 7 months ago. Viewed k times. Cesare 8, 14 14 gold badges 68 68 silver badges bronze badges.

I think we need to add arrows to the search bar and make green. This might help you understanding the difference digizol. If margin doesn't work, try padding — JoelFan. Add a comment. Active Oldest Votes. Also check out these sites for a definition. But the graphic is a perfect illustration. How does this relate to the set Width and Height of the content though? Where is that measured on all this? JJJ Nathan Nathan 5, 5 5 gold badges 23 23 silver badges 23 23 bronze badges.

Note that there are very specific circumstances in which vertical margins collapse - not just any two vertical margins will do so. Which just makes it all the more confusing unless you're very familiar with the box model. Alinjar Maity 3 2 2 bronze badges. LostLin LostLin 7, 12 12 gold badges 48 48 silver badges 72 72 bronze badges. I believe padding is applied to every side, so the element would be xpx — Asker.

Ehm, afaik padding doesn't change your element's width if that width has been set to anything other than auto. If the width is auto , then additional padding will increase the padded element's width accordingly and from both sides, as Asker mentioned — Flater. I think its a bit misleading to say that you div will be px by px because the width of your div will still be px assuming box-sizing is set as content-box. Remember these 3 points: The Margin is the extra space around the control.

In the example below, the space between h1 and p will be 30px. Margins collapsed and the greater value is applied. Margins may have negative values. It works sort of like positioning. The negative value will shift the element in an opposite direction. In the example below the paragraph will be moved to the left by 60px. Unlike padding , the margin cannot alter element size.

So no matter what value you set element size will remain intact. These powers come from the ability to set auto and negative values. NOTE: The margin area is not clickable! Due to the fact that this is the empty area outside the element. The padding is the space between the actual content and the border of the element.

It will have any background-color or backgorund-image property that has been applied to an element. The features listed below are only inherent to the padding.

Unlike margin , the padding cannot have auto or negative values. If you set auto or a negative value to padding it will not change the appearance of the element, however, in Element Inspector it will be shown as an Invalid property value.