HTML and CSS Reference
In-Depth Information
MArGiNS ANd PAddiNG
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 shited, possibly to overlap another element. A negative padding
value is efectively taken as 0. It will not cause the content to be shited into the
border or margin areas.
Example 3.13 is an HTML page with three paragraphs, each one having
diferent margin and padding values. he irst paragraph has a 0 margin and
2 em of padding. he third paragraph reverses that with a 2 em margin and
0 padding. he paragraph in the middle has 1 em each of margin and pad-
ding. he 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 efects. 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 .
 
 
 
Search WWH ::




Custom Search