7.2. Control Space with Margins and Padding Both margins and padding add space around content. You use these properties to separate one element from anotherfor example, to add space between a left-hand navigation menu and the main page content on the rightor to inject some white space between content and a border. You may want to move the border away from the edge of a photo (see Figure 7-2). Figure 7-2. Each photo on this page has a 10-pixel margin, so the gap separating two photos is 20 pixels. Padding separates the images from their borders and exposes a gray background color . You can set the border, margin, and padding independently for each edge. Notice the larger padding applied to the bottom edge of each photo. 
Padding and margin function similarly and unless you apply a border or background color, you can't really tell whether the space between two tags is caused by padding or by a margin. But if you have a border around an element or a background behind it, then the visual difference between the two properties is significant. Padding adds space between the content and the border and keeps the content from appearing cramped inside the box, while margins add white space (often called a gutter ) between elements giving the overall look of the page a lighter appearance. You can control each side of the margin or padding for an element independently. Four properties control margin edges: margin-top, margin-right, margin-bottom , and margin-left . Similarly, four properties control padding: padding-top, padding-right, padding-bottom , and padding-left . You can use any valid CSS measurement to define the size of a margin or padding, like so: margin-right: 20px; padding-top: 3em; margin-left: 10%;
Pixels and ems are commonly used and act just as they do with text (see Section 6.2). A 20-pixel margin adds 20 pixels of space, and 3ems of padding adds space equal to 3 times the font size of the styled element. You can also use percentage values, but they're tricky. (See the box below for the details.)
Tip: To remove all the space for a margin or padding, use 0 ( margin-top: 0 or padding-bottom: 0 , for example). To remove space around all four edges of the browser windowto let a banner or logo or other page element butt right up to the edge without a gapgive the body tag a margin of 0, and a padding of 0: margin: 0; padding 0 ;. The margin property works for most browsers, except Opera. Opera requires that padding be set to 0 instead.
POWER USERS' CLINIC
Margins, Padding, and Percentages | | When you use percentages, Web browsers calculate the amount of space based on the width of the containing element . On a simple Web page, the containing element is the body of the page, and it fills the browser window. In this case, the percentage value's based on the width of the browser window at any given time. Say the window is 760 pixels wide. In that case, a 10 percent left margin adds 76 pixels of space to the left edge of the styled element. But if you resize the browser window, then that value changes. Narrowing the browser window to 600 pixels changes the margin to 60 pixels (10 percent of 600). However, the containing element isn't always the width of the browser window. As you'll see in later chapters, when you create more sophisticated layouts, you can introduce new elements that help organize your page. You may want to add a <div> tag to a page in order to group related content into a sidebar area. (You'll see an example of this in the tutorial in Section 7.7.4.) That sidebar might have a specified width of 300 pixels. Tags inside the sidebar consider the <div> tag their containing element. So a tag in the sidebar with a right margin of 10 percent will have 30 pixels of empty space to its right. To make matters more confusing, top and bottom percentage values are calculated based on the width of the containing element, not its height. So a 20 percent top margin is 20 percent of the width of the styled tag's container. |
7.2.1. Margin and Padding Shorthand You'll frequently want to set all four sides of a style's margin or padding. But typing out all four properties (margin-right, margin-left, and so on) for each style gets tedious . Fear not: you can use the shortcut properties named margin and padding to set all four properties quickly: margin: 0 10px 10px 20px; padding: 10px 5px 5px 10px;
Tip: If the value used in a CSS property is 0, then you don't need to add a unit of measurement. For example, just type margin: 0 ; instead of margin: 0px ;.
The order in which you specify the four values is important. It must be top, right, bottom , and left . If you get it wrong, you'll be in trouble. In fact, the easiest way to keep the order straight is to remember to stay out of TRouBLe top, right, bottom, and left. If you want to use the same value for all four sides, it's even easierjust use a single value. If you want to remove margins from all <h1> tags, you can write this style: h1 { margin: 0; }
Similarly, use shorthand to add the same amount of space between some content and its border: padding: 10px;
Tip: When you're using the same value for both top and bottom and another value for both left and right, you can use two values. margin: 0 2em ; sets the top and bottom margins to 0 and the left and right margins to 2ems.
7.2.2. Colliding Margins When it comes to CSS, two plus two doesn't always equal four. You could run into some bizarre math when the bottom margin of one element touches the top margin of another. Instead of adding the two margins together, a Web browser applies the larger of the two margins (Figure 7-3, top). Say the bottom margin of an unordered list is set to 30 pixels and the top margin of a paragraph following the list is 20 pixels. Instead of adding the two values to create 50 pixels of space between the list and the paragraph, a Web browser uses the largest marginin this case 30 pixels. If you don't want this to happen, then use top or bottom padding instead (Figure 7-3, bottom). Figure 7-3. When two vertical margins meet, the smaller one collapses. Although the top headline has a bottom margin of 20 pixels and the paragraph has a top margin of 15 pixels, a Web browser adds only 20 pixels of space between the two elements.
To get the full 35 pixels' worth of space that you want, use padding instead of margins, as shown in the bottom headline. Here, the heading has 20 pixels of bottom padding. Those 20 pixels get added to the 15-pixel top margin of the paragraph to form a 35-pixel gap. 
Things get even weirder when one element's inside another element. This situation can lead to some head-scratching behavior. For example, say you add a "warning" box to a page (like a <div> tag to hold a warning message inside it). You add a 20 pixel top and bottom margin to separate the warning box from the heading above it and the paragraph of text below it. So far so good. But say you insert a heading inside the warning box, and to put a little room between it and the top and bottom of the div, you set the heading's margin to 10 pixels. You may think you're adding 10 pixels of space between the heading and the top and bottom of the div, but you'd be wrong (Figure 7-4, left). Instead, the margin appears above the div. In this case, it doesn't matter how large a margin you apply to the headlinethe margin still appears above the div.
Note: In the lingo of CSS, this phenomenon 's known as " collapsing margins," meaning two margins actually become one.
You have two ways around this problem: Either add a small amount of padding around the <div> tag or add a border to it. Since border and padding sit between the two margins, the margins no longer touch, and the headline has a little breathing room (Figure 7-4, right). Figure 7-4. Holy shrinking margins Batman!
Left: Whenever vertical margins touch, even when one element is inside another element, the margins collapse.
Right: To solve this dilemma, add a little padding or a border around the containing element (the <div>, in this case). 
Note: Horizontal (left and right) margins and margins between floating elements (Section 7.6) don't collapse in this way. Absolutely and relatively positioned elementswhich you'll learn about in Chapter 12don't collapse either.
7.2.3. Removing Space with Negative Margins Most measurements in CSS have to be a positive valueafter all what would text that's negative 20 pixels tall (or short) look like? Padding also has to be a positive value. But CSS allows for many creative techniques using negative margins. Instead of adding space between a tag and elements around it, a negative margin removes space. So you can have a paragraph of text overlap a headline, poke out of its containing element (a sidebar or other layout <div>), or even disappear off an edge of the browser window. And, hey, you can even do something useful with negative margins. Even when you set the margins between two headlines to 0, there's still a little space between the text of the headlines (thanks to the text's line-height as described in Section 6.4 in the last chapter). That's usually a good thing, since it's hard to read sentences that bunch together and touch. But, used in moderation , tightening the space between two headlines can produce some interesting effects. The second headline of Figure 7-5 (the one that begins "Raise Tuna") has a top margin of -10px applied to it. This moves the headline up 10 pixels so it slightly overlaps the space occupied by the headline above it. Also, the left and right borders of the "Extra! Extra!" headline actually touch the letters of the larger headline. You can also use a negative margin to simulate negative padding. In the third headline of Figure 7-5, the one that begins with "The Extraordinary Technique," a line appears directly under the text. This line is actually the top border for the paragraph that follows . (You'll learn how to add borders in Section 7.3.) But because that paragraph has a negative top margin, the border moves up and under the headline. Notice how the descending tail for the letter Q in the headline actually hangs below the border. Since paddingthe space between content (like that letter Q) and a bordercan't be negative, you can't move a bottom border up over text or any other content. But you get the same effect by applying a border to the following element and using a negative margin to move it up. Figure 7-5. In this example, to make the last paragraph's top border look like it's actually the bottom border for the headline above it, add a little padding to the paragraph. Around 5 pixels of top padding moves the paragraph down from the border, while 4ems of left padding indents the paragraph's text, still allowing the top border to extend to the left edge. 
Tip: You can actually use a negative top margin on the paragraph, or a negative bottom margin on the headline. Both have the same effect of moving the paragraph up close to the headline.
7.2.4. Displaying Inline and Block-Level Boxes Although Web browsers treat every tag as a kind of box, not all boxes are alike. CSS has two different types of boxes block boxes and inline boxes that correspond to the two types of tags inline and block-level tags. A block-level tag creates a break before and after it. The <p> tag, for example, creates a block that's separated from tags above and below. Headlines, <div> tags, tables and lists are other examples of block-level tags. Inline tags don't create a break before or after them. They appear on the same line as content and tags beside them. The <strong> tag is an inline tag. A word formatted with this tag happily sits next to other texteven text wrapped in other inline tags like <em>. In fact, it would look pretty weird if you emphasized a single word in the middle of a paragraph with the <strong> tag and that word suddenly appeared on its own line by itself. Other inline tags are <img> for adding images, <a> for creating links, and the various tags used to create form fields. In most cases, CSS works the same for inline boxes and block boxes. You can style the font, color, and background and add borders to both types of boxes. However, when it comes to margins and padding, browsers treat inline boxes differently. While you can add space to the left or right of an inline element using either left or right padding or left or right margins, you can't increase the height of the inline element with top or bottom padding or margins. In the top paragraph in Figure 7-6, the inline element is styled with borders, a background color, and 20 pixels of margin on all four sides. But the browser only adds space to the left and right sides of the inline element. Figure 7-6. Adding top or bottom margins and padding doesn't make an inline element any taller, so you can run into some weird formatting. In the middle paragraph, the background and borders of a link overlap the text above and below. The background appears on top of the line before the styled inline text, but underneath the line following it because the browser treats each line as if it's stacked on top of the previous line. Normally, that isn't a problem since lines of text don't usually overlap. To create space above and below an inline element, add the line-height property to the inline element. (The exact amount depends on how large the margin and padding are. In this case, a 400 percent line height expands the line enough so the background and border don't overlap any text.) 
Note: One exception to the rule that inline elements don't get taller when padding or margin are added is the <img> tag (even though it's an inline tag). Web browsers correctly expand the height of the image's box to accommodate any padding and margins you add.
At times, you may wish an inline element behaved more like a block-level element and vice versa. Bulleted lists present each item as its own blockeach list item's stacked above the next. But what if you want to change that behavior so the list items appear side by side, all on a single line (as in a navigation bar, as you'll see in Section 9.3.4 in Chapter 9)? Or you may want to treat an inline element like a block-level element. Maybe you want an image embedded in a paragraph to be on its own line, with space above and below. Fortunately, CSS includes a property that lets you do just thatthe display property. With it, you can make a block-level element act like an inline element: display: inline;
Or you can make an inline element like an image or link behave like a block-level element: display: block;
Note: The display property has a myriad of possible options, most of which aren't supported in today's browsers. However, one value, none , is supported by most browsers and has many uses. It does one simple thingcompletely hides the styled element so it doesn't appear in a Web browser. With a dab of Java-Script programming, you can make an element hidden in this way instantly become visible, simply by changing its display back to either inline or block . You can even make an element with a display of none suddenly appear using CSS.
|
![CSS[c] The Missing Manual](/icons/6360-small.jpg "CSS[c] The Missing Manual"){kind=icon}