When to use margin vs padding in CSS

Question

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

User · Answer

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  padding will also be affected  e g  background color   but not margin

User · Answer

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      x000D   x000D      outer   click function e    x000D    console log  outer    x000D    e stopPropagation    x000D      x000D   x000D      inner   click function e    x000D    console log  inner    x000D    e stopPropagation    x000D      x000D   outer   x000D    padding  10px  x000D    background  red  x000D    x000D   x000D   inner   x000D    margin  10px  x000D    padding  10px  x000D    background  blue  x000D    border  solid white 1px  x000D    x000D   lt script src  http   code jquery com jquery-latest js  gt  lt  script gt  x000D   x000D   lt div class  outer  gt  x000D     lt div class  inner  style  position relative  height 0px  width 0px  gt  x000D   x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

From https   www w3schools com css css boxmodel asp     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            Live example  play around by changing the values   https   www w3schools com css tryit asp filename trycss boxmodel

User · Answer

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

User · Answer

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     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

User · Answer

Margin  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   Padding  I usually use when I ve an element inside a border   lt div gt  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

User · Answer

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   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

User · Answer

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     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

User · Answer

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

User · Answer

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

User · Answer

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 the 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 to say 1em of spacing around an element  regardless of what element it is next to   The other two big differences are that padding is included in the click region and background color image  but not the margin    x000D   x000D  div box  gt  div   height  50px  width  50px  border  1px solid black  text-align  center    x000D  div padding  gt  div   padding-top  20px    x000D  div margin  gt  div   margin-top  20px    x000D   lt h3 gt Default lt  h3 gt  x000D   lt div class  box  gt  x000D     lt div gt A lt  div gt  x000D     lt div gt B lt  div gt  x000D     lt div gt C lt  div gt  x000D   lt  div gt  x000D   x000D   lt h3 gt padding-top  20px lt  h3 gt  x000D   lt div class  box padding  gt  x000D     lt div gt A lt  div gt  x000D     lt div gt B lt  div gt  x000D     lt div gt C lt  div gt  x000D   lt  div gt  x000D   x000D   lt h3 gt margin-top  20px   lt  h3 gt  x000D   lt div class  box margin  gt  x000D     lt div gt A lt  div gt  x000D     lt div gt B lt  div gt  x000D     lt div gt C lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

MARGIN vs PADDING     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  Margin is not part of an element where padding is part of element    Please refer below image extracted from Margin Vs Padding - CSS Properties

User · Answer

Margin is outside the box and padding is inside the box

User · Answer

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    It is applied to an inline element which can not contain any child elements such as an input element  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

User · Answer

I always use this principle     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

User · Answer

There are more technical explanations for your question  but if you want a way to think about margin and padding  this analogy might help   Imagine block elements as picture frames hanging on a wall    The photo is the content  The matting is the padding  The frame moulding is the border  The wall is the viewport  The space between two frames is the margin    With this in mind  a good rule of thumb is to use margin when you want to space an element in relationship to other elements 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 make the element bigger1     1 You can alter this behavior with the box-sizing attribute

[css] When to use margin vs padding in CSS

Examples related to css

Examples related to padding

Examples related to margin