One of the coolest things about CSS is that you can style features such as margins, borders and padding. It's not even just being able to style such things that I find so exciting, but the flexibility we have with the styles available.
By tapping into the CSS visual model, which is referred to as the Box Model, you can add styles to various portions of the box. I'll show you the Box Model in the following section of this tutorial so you can see exactly how the Box Model works, but the point now is that you can style not just all sides of a given box, but also specific sides of that box
One of the coolest things about CSS is that you can style features such as margins, borders and padding. It's not even just being able to style such things that I find so exciting, but the flexibility we have with the styles available.
Consider that all elements have a margin, a border, and padding within the CSS visual model. The reason for this is that every element creates a box. Two types of boxes exist: block boxes (related to block-level elements) and line boxes (related to inline boxes). Figure 11-1 shows the difference.
Figure 11-1. Examining boxes in the CSS visual model.
I've added a light gray background color to help with the visualization of block and line boxes. The H2 header is a block box. It runs the width of the available browser space (width can control this) and is followed by a line break after the block terminates at the right edge. The line box is demonstrated by a link and sits inline with the surrounding text. You can see how its edges run as close to the content as possible.
By tapping into the CSS visual model, which is referred to as the Box Model, you can add styles to various portions of the box. I'll show you the Box Model in the following section of this tutorial so you can see exactly how the Box Model works, but the point now is that you can style not just all sides of a given box, but also specific sides of that box.
Margins give you the capability to control the box's margins in both positive and negative values. Borders enable you to style the box's border using a range of predefined border styles, and padding enables us to add padding to the box (much like adding cellpadding to a table). Being able to style these aspects of any element is one of the reasons CSS is far more powerful than any formerly available technology in terms of being able to style your pages with great control.
The Box Model is a standardized bit of browser technology. The W3C oversees standardization of browsers, so it has defined the Box Model (see Figure 11-2).
Figure 11-2. The Box Model as defined by the W3C.
Compare this figure with Figure 11-1, and imagine how the highlighted background of each box contains all these portions: margins, borders, padding, and the content area. Understanding this correlation will help you greatly as you proceed not only through this tutorial, but also through tutorials to come.
QUANTUM LEAP: THE BOX MODEL IN CSS DESIGN
You'll be spending all the remaining tutorials working with aspects of the Box Model. Because CSS is used so much for visual styling, understanding the Box Model and the way it is both interpreted and misinterpreted in browsers becomes a key issue in how well you will learn and, in turn, apply CSS to your pages. As you'll find out in tutorial 12, "Positioning, Floats, and Z-index," the Box Model relates not only to how you style margins, borders, and padding, but also to how you use CSS as a positioning tool to achieve your layouts.
Margins are commonly styled to control the space between elements. You'll have noticed that there's always a certain amount of space, by default, around content displayed in web browsers (visible in Figure 11-1). This can be controlled by changing the margin values in the body element (see Example 11-1).
Example 11-1. Setting margin values for the body element
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:
black; margin-top: 0; margin-left: 0; border: 2px solid white;}
h1 {font-size: 24px; color: orange;}
h2 {font: italic 20px Georgia, Times, serif; color: #999; text-indent: 15px;}
NOTE
You'll see that I have no length value such as px or em after my 0. That's because a 0 value requires no length; the meaning is implicit.
By setting the top and left margins to 0 in the body, the entire body element shifts, along with its children elements (see Figure 11-3).
Figure 11-3. Zeroing the body margins to the top and leftnotice the white border surrounding the body element and how it's flush to the top and left of the viewport.
Check out Figure 11-3 and notice how all the children elements are now flush left, with the exception of the h2, which has a text-indent property set to 15 pixels. But the H1 and paragraph elements, both children of the body with no other identified margins, are flush left and flush top. Or are they? What's the space between the h1 and the outline of the body element? Although the element is obviously flush top, the H1 is not. This is because Mozilla browsers expect a top margin value of 0 for the first element if you want it to be flush with the containing element's top margin. In Internet Explorer, this expectation is ignored and the same style results in the h1 also being flush left and top.
In Example 11-2, I created styles to even more dramatically demonstrate the use of margins with elements, including zeroing out the H1 element.
Example 11-2. Setting a range of margins and values to demonstrate their use
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:
black; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; border: 2px solid
white;}
h1 {font-size: 24px; color: orange; margin-top: 0; margin-right: 100px; border: 2px solid
green;}
h2 {font: italic 20px Georgia, Times, serif; color: #999; text-indent: 15px;}
p {margin-left: 100px; margin-top: 5px; margin-bottom: 0; border: 2px solid yellow;}
Figure 11-4 shows how the margins are applied. I've slipped some borders in there to help visualize the margins. You'll learn more about borders later this tutorial.
Figure 11-4. Applying margins to a range of elements including the body, h1, and paragraph elements.
You can also use negative values with margins. This practice is helpful to achieve certain design needs, but it should be used with relative caution because browsers handle negative margins inconsistently.
Typically, negative margins are used to make visual adjustments, to manage workarounds for centering liquid designs in layout, or to offset specific elements outside the box in which they are contained (see Example 11-3).
Example 11-3. Using negative margins to override a containing element
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:
black; margin-top: 30px; margin-right: 30px; margin-bottom: 30px; margin-left: 130px;
border: 2px solid white;}
p {margin-left: -65px; margin-top: 5px; margin-bottom: 0;}
Now the paragraph margins are offset to the body's left margin (see Figure 11-5).
Figure 11-5. Using negative margins to override a containing blockin this case, the body element.
QUANTUM LEAP: NEGATIVE MARGIN SOLUTIONS FOR DESIGNERS
If you're interested in using negative margins to solve some known design issues, there are some terrific articles on the Web to help you out. "Creating Liquid Layouts with Negative Margins," by Ryan Brill, is terrificread it now or hold off 'til you read the next two tutorials (see http://www.alistapart.com/articles/negativemargins/). You can center elements using negative margins, too, as described by Rob Chandanais at http://www.bluerobot.com/web/css/center2.html. As with so many issues in CSS, the way browsers implement a property differs. Negative margins fall into this category because they are interpreted differently by different browsers. So use with careand, as a good rule of thumb, if there's an easier way to accomplish the end result, use it.
Margin properties have a shorthand counterpart using the margin property. You'll have noticed that CSS shorthand properties tend to have quirks of their own, such as the order of values. Margins are no exception to this.
Using the margin property, you set up the values for your margins in this exact order: top, right, bottom, left. The popular mnemonic for this in the industry is "TRouBLe." In Example 11-3, I'd set all the longhand properties for the body:
body {margin-top: 30px; margin-right: 30px; margin-bottom: 30px; margin-left: 130px;}
Although longhand doesn't require the specified margin order, I thought it would be helpful for you to see how this translates to shorthand:
body {margin: 30px 30px 30px 130px;}
You'll note that there are no commas separating each value, and the values will be applied in the exact TRBL order.
But wait, there's more. You can shorten your shorthand by relying on the fact that opposite side values automatically take their counterpart's value if they are not set:
Body {margin: 30px 20px}
That results in 30 pixels top and bottom, and 20 pixels right and left. So what happens when there are three values?
body {margin: 30px 20px 70px;}
The left value takes from the right, so this results in a margin of 30 pixels top, 20 pixels right, 70 pixels bottom, and 20 pixels left.
If all your margins are of equal size, simply use the value once:
body {margin: 100px;}
This results in a 100-pixel margin for all sides of the body element.
You also can use percentages as well as width values:
body {margin: 20%}
That results in a margin of 20% all the way around. Finally, remember that you do not need to define length or percentages if your value is 0:
body {margin: 0 30px 20px 0;}
In the past tutorials, you've seen me use borders to help you visualize CSS concepts. Here, I'll go into a bit more detail with you.
You can style borders based on their side, width, style, and color. Each of these uses a different border property: border-width, border-style, and border-color. You place the side of the border in between the two portions of the border property: border-left-color, border-right-style, and border-top-width. See the "Border Shorthand" section of this tutorial for a more streamlined approach to border properties.
Border Width
Border widths can be specified using length values such as pixels or ems or keywords, which include thin, medium, and thick:
border-bottom-width: 2px; border-left-width: thick;
Border Style
Here's where things get really fun. Currently eight style values will create a unique border, and two additional values are used for the border-style property (see Table 11-1).
Style | Effect |
|---|---|
dotted | A series of dots |
dashed | A series of dashes |
solid | A solid line |
double | Two solid lines |
groove | A groove set into the canvas |
ridge | A ridge coming out of the canvas |
inset | An embedded appearance |
outset | A raised appearance |
hidden | Hidden border, which you can unhide using scripting |
none | No border is ever visible |
Here's a look at a border style property and value in action:
border-right-style: dotted
Border Color
Colors can be set using any of the available values: hex, hex shorthand, RGB values, RGB percentages, or supported color names:
border-top-color: #808080;
All Together Now!
Example 11-4 shows you how to use different combinations of border properties.
Example 11-4. Combining border property styles
[View full width]
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:
black; margin-top: 0;}
h1 {font-size: 24px; color: orange; border-left-width: 3px; border-left-color: red;
border-left-style: dotted; border-bottom-width: thick; border-bottom-color: lime;
border-bottom-style: inset;}
h2 {font: italic 20px Georgia, Times, serif; color: #999; text-indent: 15px; border-bottom
: thin; border-bottom-style: dotted; border-color: fuschia;}
p {border-left-width: medium; border-left-style: solid; border-left-color: blue;}
You can see all the border styles in use in Figure 11-6.
Figure 11-6. Applying borders to specific border sides and applying width, style, and color values.
[View full size image]
Border shorthand is the most extended shorthand for a single property. You have several shorthand options.
Shorthand for Side, Width, Style, and Color
Each category of shorthand has corresponding shorthand, as follows:
border-right, border-left, border-top, border-bottom border-width border-style border-colorSo, you can write this:
border-right: 1px dotted red;The property then causes the selected element to have a right border of 1 pixel, dotted, and of the color red.
The border Property
This shorthand property sets the width, style, and color for all four sides of the element in question:
border: thick ridge white;In Figure 11-7, you can see the results for this.
Figure 11-7. Using border shorthand.
[View full size image]NOTE
Unlike with margins (and padding), you cannot set differing widths in the border property itself. Also, if you want to style one border differently than the other three, just add another rule using that border's nonshorthand property, such as border-right-width.
Padding enables you to style the space that lies between the content and its border. In this tutorial's previous examples, you'll notice elements that are flush against their borders and margins. Padding helps to solve this issue. You can add padding to an individual side using length values such as pixels or percentages. The individual padding properties are padding-top, padding-right, padding-bottom, and padding-left. You can see each of these in use in Example 11-5.
Example 11-5. Using padding properties to add whitespace
[View full width]body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:You'll notice the padding separating the H1 text from its border, and the padding to the top, right, bottom, and left of the paragraph (see Figure 11-8).
Figure 11-8. Adding padding to gain whitespace.
You can use shorthand with padding, too, using the padding property. Shorthand for padding most closely resembles the way margin shorthand is managed.
This means that order is imperative, and you'll run into TRouBLe really quickly if you don't remember that! You must place your values in the top, right, bottom, left order for them to work:
p {padding: 15px 30px 25px 0;}
This rule results in a paragraph with 15 pixels of padding to the top, 30 pixels to the right, 25 pixels to the bottom, and 0 pixels to the left (see Figure 11-9).
Figure 11-9. Using the padding shorthand property to manage the padding of the paragraph.
You can also use combinations of two and three values, which work the same way as described for margin shorthand earlier this tutorial. Finally, a single value applies to all four sides of the element's box.
Certainly, beginning to explore the Box Model and understand how elements work when CSS is added to the mix brings you even further along the road to gaining more control over your designs.
One area that I want to remind you of is having the correct document structure. Because of the DOCTYPE switching technology mentioned early on in this book, it becomes imperative to ensure that you are using a correct DOCTYPE, to make sure you don't have problems with the Box Model in IE 6.0.
If you've followed the methods in this book, you won't need to worry about it. See? There really is a method to my madness!
Next up, the holy grail of CSS: positioning. Are you ready? Let's go!
discuss this topic to forum
