Setting an Element s Padding

Setting an Element's Padding

At first glance, padding (Table 6.9) seems to have an effect identical to margins: It adds space around the element's content. The difference is that padding sets the space between the border of the element and its content, rather than between the element and the other elements in the window. Padding is especially useful if you're using borders and background colors and you don't want the content butting right up to the edges.

Table 6.9. Padding Values
Value	Compatibility
<length>	IE4, FF1, S1, O3.5, CSS1
<percentage>	IE4, FF1, S1, O3.5, CSS1
inherit	FF1, S1, O7, CSS2

In this example (Figure 6.11), padding is set to help space the content away from the edge of its border, either defined by the border property or by the background. Rather than smashing up against the edge of the navigation box, the links now have a bit of breathing room, and so do the text in the form button and the figure caption in the drop box.

Figure 6.11. Like margins, padding can add white space to your design to open it up and make it easier to view.

To set padding:

padding:

Start your declaration by typing the padding property name, followed by a colon (Code 6.8).

Code 6.8. Setting padding allows you to space the content from the edge of the border of the element.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> CSS, DHTML &amp; Ajax | Setting an Element's Padding</title>         <style type="text/css" media="screen"> <!-- body {      font-size: 1em;      font-family: Georgia, "Times New Roman", times, serif;      color: #000000;      background-color: #fff;      margin: 8px; } h1, h2 {      color: #999;      margin: .5em 0em; } h2 {      clear: both; } img {      margin: 4px;      display: block; } form {      padding: .5em 4em 1em 2em;      margin: 4px 0px;      border-bottom: 1px solid #f66; } input.formText {      border: 1px solid #666;      background-color: #999; } input.formButton {      border: 1px solid #999;      background-color: #ccc;      color: #333; } #navigation {      margin-right: 8px;      border: 3px solid #666;      background-color: #ccc;      float: left;      font: small Arial, Helvetica, sans-serif; } input.formText {      border: 1px solid #999;      background-color: #ccc; } input.formButton {      padding-right: 16px;      padding-left: 16px;      border: 1px solid #f66;      background-color: #f99;      color: red; } # navigation a {      padding: 2px 4px;      border-top: 3px solid #fff;      text-decoration: none;      display: block;      color: red; } # navigation a:hover {      border-top: 3px solid #999;      color: red;      background-color: #fff; } # copy p {      margin: 1em 5em; } .author {      margin-top: 0cm;      font: bold 1em Arial, Helvetica, sans-serif; } .chapterTitle {      display: block;      font-size: smaller;      color:black; } .dropBox {      padding: 6px;      border: 3px solid #f66;      margin: 0px 0px 8px 8px;      float: right;      font: small Arial, Helvetica, sans-serif; } --></style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT &rArr; </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" >      Search Book:      <input  type="text" name="searchTerm" size="24" />      <input  type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER IV      <span >The Rabbit Sends in a Little Bill</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice12a.gif" height="236" width="200" alt="Alice" /> Alice makes some new friends? </div> <p> It was the White Rabbit, trotting slowly back again, and looking anxiously about as it  went, as if it had lost something...</p> </div> </body> </html>

.5em 4em 1em 2em;

Next, type a value for the element's padding, which can be any of the following:

length values, which creates padding of the exact size you specify
A percentage, which creates padding proportional to the parent element's width
inherit to use the parent's padding value

To set each side's padding value separately, you can type from one to four values.

One value sets the padding for all four sides.
Two values set the padding for the top/bottom and left/right sides.
Three values set the top padding, the padding for the left/right sides (the same), and the bottom padding.
Four values set the padding for each side individually, in this order: top, right, bottom, and left.

padding-right: 16px;

As with margins, padding can also be set independently on all four sides of the box (top, bottom, left, and right).

Tips

Padding and margins are easily confused because their results often look the same if no border or background is visible. Remember: Margins separate one element from other elements, but padding is the space between the border and the content of the element.
Because of the limitations of the box model, discussed earlier in this chapter, be careful when setting padding. It will be rendered differently in Quirks mode of Internet Explorer versus other modern browsers.
If there is no border around or background-color behind the element, setting the margin will have the same visual effect as padding, and you won't run into the issues surrounding box model measurements.