A Smarter Way To Learn HTML & CSS(2015)

18
Padding

When you put a border around a paragraph, heading, or other element, you’ll often want to add breathing room—whitespace—between the border and what’s inside it. To add a few pixels of whitespace all around, for example, you could write…

p.boxed {
border: 5px solid red;
padding: .1em;
}

The higher the em value, the wider the gap between the border and its content.

To specify gaps of different widths for different sides:

p.boxed {
border: 5px solid red;
padding: .1em .2em 0 .3em;
}

The code above specifies a small gap at the top, a larger gap on the right, no gap at the bottom, and the largest gap on the left.

Like code for margins, the numbers start at the top and go clockwise.

You can also specify padding for individual sides. The following code duplicates the effect of the more concise code above.

p.boxed {
border: 5px solid red;
padding-top: .1em;
padding-right: .2em;
padding-bottom: 0;
padding-left: .3em;
}

If you’re going to specify padding for all four sides, the more concise code is preferable. But if you want to specify padding for just one or two sides, you might prefer the individual specifications.

Revise your CSS file to include some padding in the class that specifies a border. Save the file. Display your HTML file.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-18-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/18.html