If you’ve been using CSS for a while, then this post will probably teach you nothing new. I just wanted to state the obvious even if I’m the only one who benefits from it.

While I was (re-)learning CSS, I came across these two properties called margin and padding. At first, they seem to be doing the same thing namely providing space between HTML elements. But although they seem to fulfill the same purpose, there’s a clear distinction between the two.


The margin is intended for providing space between outside HTML elements or the sides of the page. Padding is used for providing visual space between the content and the border of the box.

Some margin, no padding
Some padding, no margin


The first example provides a margin to add visual space between the border and the parent element. The second one provides space between the border and the content.

I agree that this is trivial, but it matters to understand the difference between these two properties when using CSS.

Previous post

Calls to ReportExecutionService.Render() Hang

Next post

Calling Non-Public Methods


  1. January 26, 2010 at 2:29 pm

    You may want to mention the fun that can be had when trying to apply this simple concept in IE6 or IE7.

    Or just point to the many, MANY search results that discuss the evils to be found in that particular browser: http://www.bing.com/search?q=ie6 box model css&form=OSDSRC

  2. January 27, 2010 at 9:38 am

    I enjoyed your comment about re-learning CSS. I learn and re-forget it all the time. My favorite resource is the book “CSS: The Missing Manual”.

  3. January 27, 2010 at 1:38 pm

    Looks like an interesting book. Thanks for the tip. I’ve also picked up “Pro CSS Techniques” and “The Art and Science of CSS”.

  4. January 29, 2010 at 3:03 pm

    […] I already mentioned in a previous blog post, I’m kind of (re-)learning HTML and CSS. The best way for me to pick things up again is by […]