<\/p>\n<\/p>\n
There are two ways in CSS to create space around your elements: margins and padding. In most usage scenarios, they are functionally identical \u2013 for example, if you add 20 pixels of either margin or padding to the left side of an element, that element will generally move 20 pixels to the right on the screen. But in truth, they do behave in slightly different ways. So when should you use margins, and when would padding be more appropriate?<\/p>\n
Use margins when:<\/strong><\/p>\n Padding, on the other hand, behaves very differently in these scenarios. Thus, you\u2019d want to use padding when:<\/strong><\/p>\n So as you can see, 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. <\/p>\n For example, I tend to use margins almost exclusively when I\u2019m trying to create space between two elements. In my mind, margins are used for creating space between<\/em> elements, while padding is used for creating space within<\/em> elements. Therefore, I use margins to move disparate elements apart, and padding to create a little breathing room within the elements themselves.<\/p>\n However, a case could also be made for using padding for effecting space between elements. From time to time, Internet Explorer 6 will have trouble with margins \u2013 there\u2019s something out there known as the doubled-margin float bug<\/a> that can wreak all sorts of havoc with pages laid out with margins when they\u2019re loaded in our favorite \u201cspecial\u201d browser. Using padding almost exclusively does create a way around this problem. I personally tend to just use a CSS hack or two to make IE behave itself when we\u2019re in public, but as I said, this can be an effective argument for ubiquitous padding.<\/p>\n\n
\n