For elements without a border, this space is composed of margin and padding on each of the element’s four sides.. For elements with a border, the margin is the amount of space on the out
Trang 1M A rG i N S AN d PA ddi NG
Most HTML elements are rendered with some amount of space between
them For elements without a border, this space is composed of margin and
padding on each of the element’s four sides For elements with a border, the
margin is the amount of space on the outside of the borders, and the
pad-ding is the amount of space on the inside of the border Both the margin and
padding properties can take any size value, including a percentage value and
the keyword auto A margin value can be negative and will cause an element’s
position to be shifted, possibly to overlap another element A negative padding
value is effectively taken as 0 It will not cause the content to be shifted into the
border or margin areas
Example 3.13 is an HTML page with three paragraphs, each one having different margin and padding values The first paragraph has a 0 margin and
2 em of padding The third paragraph reverses that with a 2 em margin and
0 padding The paragraph in the middle has 1 em each of margin and
pad-ding The text is from a children’s story by the English mathematician Charles
Lutwidge Dodgson.4 All body elements are given a light gray background to
illustrate the effects Figure 3.13 shows how the HTML appears in a typical
browser
Example 3.13: Use of margin and padding for block elements
<!DOCTYPE html>
<html>
<head>
<title>Example 3.13</title>
<style type="text/css">
body * { font-family: Comic Sans MS,cursive; background-color: #ccc; }
#p1 { margin: 0em; padding: 2em; }
#p2 { margin: 1em; padding: 1em; }
#p3 { margin: 2em; padding: 0em; }
</style>
</head>
<body>
<p id="p1">In a minute or two the Caterpillar took the hookah out of
its mouth and yawned once or twice, and shook itself </p>
4 Writing under the pseudonym Lewis Carroll in Alice’s Adventures in Wonderland
Trang 2<p id="p2">Then it got down off the mushroom, and crawled away in the
grass, merely remarking as it went,</p>
<p id="p3">"One side will make you grow taller, and the other side will
make you grow shorter."</p>
</body>
</html>
Figure 3.13: An element with different amounts of margin and padding
Notice that there are a few pixels of space between the first paragraph,
which has 0 margins, and the edges of the browser’s window Where does this
space come from? A bit of experimentation shows that this space is the body
element’s margin! This is a bit illogical You might expect the body element
to have some amount of padding so that content doesn’t mash up against the
window’s edges, but it should not need any margin to separate itself from
other content elements, because there are none The body element does, in fact,
have a parent element, the html element, that can be given margins, padding,
borders, and background that will be recognized by most browsers However,
how browsers should behave at the extreme margins is not well defined Web
developers should avoid assigning any styles to the html element
The body element’s default margin amount may be due to historical reasons,
but it does have a consequence Unlike other HTML elements, any background
color or image assigned to the body element is extended to the edges of the
Trang 3browser’s window In other words, the document body acts as if it has a 0
mar-gin and a few pixels of padding when it comes to backgrounds, but its marmar-gin
controls the position of its child elements A web author must explicitly set
the body’s margin to 0 to eliminate the default space between the edges of the
browser’s window and any content elements
The margin and padding properties are actually shorthand notations for sets
of properties:
margin-top padding-top margin-right padding-right margin-bottom padding-bottom margin-left padding-left Any single value given to the margin or padding properties is applied to the
margins or padding on each side of the element This shorthand notation
allows the author to specify different amounts on each side of an element in
the following manner:
p.intro { margin: 0 5em 20px 5em; }
The ordering is clockwise: top, right, bottom, left Therefore, the preceding
rule is the same as this one:
p.intro {
margin-top: 0; /* zero amounts do not need units */
margin-right: 5em;
margin-bottom: 20px;
margin-left: 5em;
}
When given a value consisting of fewer than four amounts, the existing amounts are recycled Thus, this
p.intro { padding: 0 2%; }
is the same as this:
p.intro { padding: 0 2% 0 2%; }
Trang 4Bor dE r S
Element borders are created by using one or more of the border properties
to set values for the width, color, and style of the border The border-width
property can take any nonnegative numeric value or one of the keywords thin,
medium, thick, or inherit, with medium as the default value The permissible
values for the border-style property are none, hidden, solid, dotted, dashed,
double, ridge, groove, inset, outset, and inherit The default for all HTML
elements is a border with a style of none Therefore, an element must have its
border-style property set to some other value for a border to appear Older
browsers may not support all values Example 3.14 illustrates the use of a table
to display the different border style values Figure 3.14 shows how this code
appears in a typical browser
Example 3.14: Using a table to display border styles
<!DOCTYPE html>
<html>
<head>
<title>Example 3.14</title>
<style type="text/css">
body { font: bold 9pt Tahoma,Verdana,sans-serif; }
td { border-width: 5px; padding: 1em; background-color: #ddd; }
td:before { content: attr(style); } /* insert style content */
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="8">
<tr>
<td style="border-style: none"></td>
<td style="border-style: hidden"></td>
<td style="border-style: solid"></td>
<td style="border-style: dotted"></td>
<td style="border-style: dashed"></td>
</tr>
<tr>
<td style="border-style: double"></td>
<td style="border-style: ridge"></td>
<td style="border-style: groove"></td>
Trang 5<td style="border-style: inset"></td>
<td style="border-style: outset"></td>
</tr>
</table>
</body>
</html>
Figure 3.14: Ten different border style types
The border-style value of hidden appears to have the same effect as the value none That is, both values cause the browser to draw a border with a 0
width This is unfortunate, because it would be useful to keep the border’s
space and color without showing it Consider the following HTML, which sets
up a horizontal menu of two links:
<style type="text/css">
li { list-style-type: none; float: left; padding: 1em; }
li a { text-decoration: none; }
li a:hover { border-style: solid; }
</style>
<ul>
<li><a href="here.html">link 1</a></li>
<li><a href="there.html">link 2</a></li>
</ul>
Example 3.14: Using a table to display border styles (continued)
Trang 6When the reader’s mouse hovers over the first link in the list, a medium
border is drawn around it However, this border takes up an additional
num-ber of pixels on the right and left of the link and pushes the second link to the
right Coding this
li a { border-style: hidden; }
doesn’t help The following CSS is needed to toggle the link borders on and off
without shifting the following elements to the right:
li a { border-style: solid; border-color: transparent; }
li a:hover { border-style: solid; border-color: black; }
The border property is a shorthand method for setting color, style, and width
in one statement The ordering does not matter For example:
div.greeting { border: 2px solid rbg(220,240,250); }
#sidebar widget { border: white dotted; }
#main button { border: #456 3px outset; }
Each of the four sides of an HTML block element has its own set of border
properties by using one of the following:
border-top-width border-top-color border-top-style
border-right-width border-right-color border-right-style
border-bottom-width border-bottom-color border-bottom-style
border-left-width border-left-color border-left-style
A shorthand notation can also be used The border-width, border-style, and
border-color properties can each take up to four values to specify the values for
the top, right, bottom, and left borders, respectively Also, the four properties
border-top, border-right, border-bottom, and border-left can use the same
shorthand notation as the border property Here are some examples:
p { border-right: thin solid gray; }
p { border-style: none none solid none; } /* just a bottom border */
p { border-color: red blue; }
Highlighting elements that you want to draw attention to by giving
them borders is a nice touch But borders with rounded corners are cool!
Trang 7border-radius property is not supported by all browsers However, several
browser manufacturers have added proprietary CSS properties to set border
corners These are -moz-border-radius for Mozilla browsers such as Firefox,
and -webkit-border-radius for Webkit browsers (Safari and Chrome)
Inter-net Explorer does not support border-radius as of IE version 8 Authors are
encouraged to use all proprietary properties when coding CSS for rounded
corners for the best results across all browsers For example:
p.welcome {
border: medium solid blue;
border-radius: 5em;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
}
Example 3.15 demonstrates the creation of borders with rounded corners for browsers built on the Mozilla engine, such as Firefox Figure 3.15 shows
how the HTML is displayed on the Firefox browser
Example 3.15: HTML for borders with rounded corners
<!DOCTYPE html>
<html>
<head>
<title>Example 3.15</title>
<style type="text/css">
body { font: 9pt Tahoma,Verdana,sans-serif; padding: 1em; }
p { padding: 1em; background-color: #ddd; }
</style>
</head>
<body>
<p style="border: 2px solid; -moz-border-radius: 10px;">
border: 2px solid;<br/>-moz-border-radius: 10px;</p>
<p style="border: 6px outset; -moz-border-radius: 6px;">
border: 6px outset;<br/>-moz-border-radius: 6px;</p>
<p style="border: 6px dashed; -moz-border-radius: 10px;">
border: 6px dashed;<br/>-moz-border-radius: 10px;</p>
</body>
</html>
Trang 8Figure 3.15: rounded corners
List Styles
CSS provides three properties that help authors create lists with style:
list-style-type, list-style-position, and list-style-image A fourth shorthand
property, list-style, allows the author to specify all list properties in a single
statement List properties can be applied to list and list item elements A
list item element that doesn’t have its own list style properties set inherits
those property values from its parent list element Here are some examples of
list-style:
ul.nav { list-style-type: none; }
li.selected { list-style: url(images/check.gif) inside; }
The set of permissible values for the list-style-type property has
under-gone some changes over time The CSS2 specification has about 20 values,
whereas CSS2.1 has only a dozen The draft specification for CSS3 expands
the permissible values a couple orders of magnitude with support for many
national language symbol sets
The list-style-image property allows a web designer to use a custom image
for a list bullet The list-style-position property has three permissible values:
inside, outside (the default), and inherit The outside value places the marker
some distance outside the list item’s border How far outside is
browser-dependent The inside value places the item marker inside the list item’s
content box as if it were an inline element You can easily see the difference by
Trang 9For unordered lists, the following values are supported by most browsers:
none, disc, circle, square, and inherit Figure 3.16 illustrates the first four of
these values in two lists The first has a list-style-position value of outside,
and the second has the value inside Example 3.16 contains the HTML and
CSS code that produces Figure 3.16
Example 3.16: HTML and CSS for two lists with different list-style
properties
<!DOCTYPE html>
<html>
<head>
<title>Example 3.16</title>
<style type="text/css">
body { padding: 1em; }
ul li { border: 1px #999 solid; padding: 25em; }
lh { font-weight: bold; }
li:before { content: attr(style); }
#l1 { list-style-position: outside; }
#l2 { list-style-position: inside; }
</style>
</head>
<body>
<ul id="l1">
<lh>Outside position</lh>
<li style="list-style-type: none;"></li>
<li style="list-style-type: disc;"></li>
<li style="list-style-type: circle;"></li>
<li style="list-style-type: square;"></li>
</ul>
<ul id="l2">
<lh>Inside position</lh>
<li style="list-style-type: none;"></li>
<li style="list-style-type: disc;"></li>
<li style="list-style-type: circle;"></li>
<li style="list-style-type: square;"></li>
Trang 10</ul>
</body>
</html>
Figure 3.16: List style positions and list style types
For ordered lists the appropriate list-style-type values are decimal,
decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha,
lower-greek, and armenian
In the ordered list element shown in Example 3.17, each list item is given
one of these ordered values Figure 3.17 shows the result in a typical browser
Example 3.17: HTML and CSS for displaying ordered list style types
<!DOCTYPE html>
<html>
<head>
<title>Example 3.17</title>
<style type="text/css">
body { padding: 1em; font-family: sans-serif; }
li:before { content: attr(style); line-height: 1.5em; }
</style>
</head>