BWD Chapter 15: CSS: Margin, Padding, Border
2004-12-19 18:26 - Beginners Web Development
Chapter 15
CSS: Margin, Padding, Border
I will start off again by saying that the W3C standards are a great place to look up all the little details when writing style sheets. Even experts need to refer to a reference to remember the details on occasion.
This chapter, in discussing the margin, padding, and border properties must get into the box model. The box model is a description of how a box is laid out on the screen when specified through CSS. A box has a width and height, whether assigned in the styles, or computed by the browser. Along the edges of this box, the border is drawn. The border extends the size of the box, or in other words is drawn around the outside edge. Padding is space inside the box, between the border and whatever may go in the box. Margin is space outside the box, between the border and anything around the box. If an element has a background, it goes inside the border, drawn in the padding but not the margin.
Except in internet explorer. In IE, the margin and border go inside the box. A margin or border shrinks the space inside the box in IE. This means that putting a margin or border onto a box in IE keeps the size of the box the same, rather than the way the standard says, keeping the border and margin outside the box.
This bug is sometimes completely missed. Small borders and margins may be completely missed. A page that flows well will look slightly different, but still appear ok. Some layouts can be very negatively effected by this though. Let us look at an example of what we are referring to. Below will be some sample code, followed by the code as it is rendered in Firefox, and in IE.
<html>
<head>
<title>Box Model Showoff</title>
<style>
body {
background-color: navy;
margin: 0;
font-size: 12px;
}
.boxmodel, .boxmodelpad {
margin: 30px;
border: 15px solid red;
padding: 0px;
background-color: yellow;
width: 200px;
}
.boxmodelpad {
padding: 10px;
}
</style>
</head>
<body>
<div class="boxmodel">This is the box model in BROWSER, no padding.</div>
<div class="boxmodelpad">This is the box model in BROWSER, with padding.</div>
</body>
</html>
I've drawn two vertical gray lines on top of these shots. They outline the 200px width that we laid out in the style, and emphasize the difference between IE and Firefox. We can quickly see that IE keeps it's far outer edges to the width specified in the style. This seems somewhat intuitive, but goes against the written standards. Software that follows the standards, such as Firefox, draws boxes in a very different way than IE.
For now, just remember that different browsers do different things. There are standards to follow, but there is nothing to force any software to follow them. How to get around these quirks quickly become advanced issues. In this instance, keep your padding, borders, and margins small or nonexistent where they will adversely effect positioning if they're a little off. There are many other places that different browsers render CSS rules different ways, but this is one of the big ones.
With that said, why don't we take a detailed look at all of the code in that example? There's a lot of great things to learn! But careful: there's a lot of bad things to learn as well! I used pixels to measure my distances above. That's because I was looking to demonstrate the way it worked differently in different browsers, and pixels are the same size. Any time you measure something in exact pixels, you lock down the size. On the web, it is good to make sure your designs flow well. The same font will be a different size, maybe even really a different font, when in Windows or Mac or Linux. The monitor is a different size for every different person. The window might be maximized, it might be smaller. It's important to make sure that your design will fit well within any situation that it might find itself. Pixels are the biggest step away from that.
That said, notice how I used cascading rules to apply similar attributes to two different classes? The second rule applies a number of properties to both the boxmodel and boxmodelpad classes. The following applies only some additional padding to the boxmodelpad class. This is more efficient to parse, and easier to maintain than specifying each attribute twice, once for each class.
As I said earlier, margin, padding, and border are all shortcut properties. They each stand in for the combination of the four sides of the box they can be applied to: top, right, bottom, left. Remember that standard way of laying them out: starting at the top and going clockwise. To specify different values for the four sides, a rule like margin: 10px 8px 6px 4px; can be used. Furthermore, a shorter rule can be used: padding: 1em 2em; which specifies the top/bottom and right/left values.
For the border, each of the four rules has itself many properties that it is a shortcut for, such as width, style, color, and so on. Refer to the specs for the full available list. A width, color, and style, at the minimum, are required. When not supplied the color and style accept their default values.
2005-10-06 12:11 - cjy@portaltech.net