Articles :: CSS :: Padding or Margin?

written by Toby Miller on August 31, 2005
August 31, 2005

I was reminded today that some people still struggle with the difference between padding and margin. This can be frustrating for someone just learning CSS. We've all been there, "hmm, let's try padding ... nope that's not right, how about margin ... that looks better". Well, stop guessing and look at this simple diagram instead.

padding/margin diagram

You can see that the padding is the area between the inside of the border and the content. The margin is the area between the outside of the border and it's neighboring elements. That's it, pretty simple.

permalink                                                                                                                                                                          
   Natural Living (5)
      Heating & Cooling (1)
      Herbal Remedies (1)
   Personal (0)
      Family (1)
      Humor (11)
      Miscellaneous (1)
      Politics (5)
   Technology (2)
      System Administration (4)
            Linux (1)
            Solaris (0)
      Web Development (2)
            CSS (3)
            Design (1)
            Flash (1)
            JavaScript (11)
            PHP (1)
                        CakePHP (1)
            Web Browsers (2)
                        Firefox (1)
                        Internet Exploder (0)
                        Netscape (1)
printed @ tobymiller.com
(currently rendering CSS for Internet Explorer)(currently rendering CSS for non-Internet Explorer browsers)