Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 125

Table 4.1 New CSS properties introduced in this chapter ( continued )

Property Description Values

padding Shorthand notation to configure the

amount of padding—the blank space
between the element and its border

1. A single numeric value (px or em); configure
padding on all sides of the element.
2. Two numeric values (px or em); the first
value configures the top and bottom
padding, the second value configures the
left and right padding; for example:
padding: 20px 10px;
3. Four numeric values (px or em) or percent-
ages.
The values configure the padding in the follow-
ing order: padding-top , padding-right ,
padding-bottom , padding-left .

padding-bottom Blank space between an element and its

bottom border

A numeric value (px or em) or percentage

padding-left Blank space between an element and its

left border

A numeric value (px or em) or percentage

padding-right Blank space between an element and its

right border

A numeric value (px or em) or percentage

Blank space between an element and its
top border

A numeric value (px or em) or percentage

padding-top

HANDS-ON PRACTICE 4.2

In this Hands-On Practice you will work with the border and padding properties.
Launch a text editor and open the Web page found at chapter4/starter2.html in the stu-
dent files. You will modify the CSS style rules for the h1 selector, h2 selector and
footer id. When you are finished, your page should look similar to the one shown in
Figure 4.3.

Modify the CSS style rules as follows:

● Modify the style rules for the h1 selector. Remove the line-height style rule
because you will configure the empty space using padding . Add a style rule to set
the padding to 15 pixels. The code follows:
padding: 15px;
● Add a style rule to the h2 selector to configure a 2 pixel, dashed, bottom border
in the color #191970. The code follows:

border-bottom: 2px dashed #191970;
● Add style rules to the footer id to configure a thin, solid, top border in the color
#aeaed4 along with 10 pixels of top padding. The code follows:

border-top: thin solid #aeaed4;
padding-top: 10px;

Save your file as border.html.