The Box Padding

Padding adds space between the box's content and the border of the box. As part of the inside of the box, it takes on the color of the box's background.

Sample

Without padding, any border that you add to an element such as this paragraph is very close to the content; not always the desired result.

p.sample2{width:300px; background-color:#AAAFFF; padding:0 20px;}

Even a small amount of padding gives the content some visual breathing space. Note that the padding area around the content also takes on the background color; it makes perfect sense that the background color extends to the border and does not just color the area behind the content itself.

The Box Margins

p.sample3{width:400px; background-color:#AAACCC; padding:0 40px;}

Margins are slightly more complex than borders and padding. First, most block level elements (paragraphs, headings, lists, and so on) have default margins, as we saw earlier

It's good practice to place the following declaration at the top of a style sheet: *{margin:0; padding:0;}. This sets the default margin and padding of all elements to zero so that you don't get confused by shich margins and padding the browser sets and which you set. Once you put this in your style sheet, all the default margins and padding will disappear.

How Big is a Box?

p.sample5{width:250px; background-color:#DDEBBB; padding:0 50px;}The way the box model works is at the heart of some of the most frustrating aspects of CSS for beginner and expert alike. Note in the discussion that follows taht we are talking about block level elements, such as headings, paragraphs, and lists; inline elements behave differently.

p.sample6{width:400px; margin:0; background-color:cyan; padding:0 20px; border: #000 solid;
border-width: 0 6px 0 6px;}

This element is 350 pixels wide. If we didn't set the width explicitly, the element would extend to the width of the page, as the body tag is its containing element. On each side of the box, the padding is 10 pixels and the border is 10 pixels, so now the total width of the element is 452 pixels.