1. Home
  2. Computing & Technology
  3. Web Design / HTML

Padding Added

CSS Box Model

From Jennifer Kyrnin, About.com

Padding AddedImage courtesy J Kyrnin
Padding Added

Adding some padding stretches out the space that is used by the element - the edge of the content is where the dotted line is, but as you can see, the background image is expanded to fill in the additional space. For the example, I used an image that was exactly the height and width of the content plus padding. So the image does not tile or clip. The CSS is:

width: 260px;
height: 260px;
background-image: url(bgimage.jpg);
padding: 20px;

View

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. CSS
  5. CSS Box Model - Illustrated CSS Box Model - Padding Added

©2008 About.com, a part of The New York Times Company.

All rights reserved.