The padding is the empty space inside the box borders. It separates the content (text or image) from the border.
As with margins you can set the padding with pixels, ems, points or percentage and you can set it individually. Add to the text in the box in boxmodel.html (it currently says "Hi" but make it a full paragraph of 50 words or more). Now set the padding to see the effect.
padding-top:2px;
padding-right:10px;
padding-bottom:20px;
padding-left:5px;
Play with those figures in boxmodel.html and note that the content may no longer fit in the box with lots of padding because of the set height and width. When that happens the box stays the same but the content carries on. Probably not an attractive look!




