Box Properties | Blogging in a Snap (Sams Teach Yourself)

Block-level elements adhere to what is known as "the box model," which basically describes how each block essentially starts out as an invisible box to which visible borders and padding inside the box may be added, and margins outside the box may be implemented. As you can imagine, there are several styles you can use to control the display of your box. We'll start with borders because they're the easiest to understand.

WEB RESOURCE

http://adactio.com/articles/display.php/CSS_based_design/8

This article manages to clearly describe the box model in only two pages!

border-[location]-width. A border is made up of four locations: top, right, bottom, and left. Again, order is important and there's an acronym you can use to remember it: TRBL or "trouble"as in "if you screw up the order of locations, your template will be in trouble." The general syntax for the border-[location] settings is
```
 border-[location]: type OR size 
```
The possible types for border width are thin, medium, and thick, or you can use pixel-based measurements such as 1px for a one-pixel border, 2px for a two-pixel border, and so on. To define the borders of a block element in a rather ugly way, you could use
```
 border-top-width: thin; border-right-width: medium; border-bottom-width: thick; border-left-width: 10px; 
```
You can also combine the width-related elements using the proper order, like so:
```
 border-width: thin medium thick 10px; 
```
I advocate the use of absolute sizes for borders, such as 1px or 2px, because doing so puts the responsibility for the design in your hands and is not left up to the whims of the web browser.
border-color. You can set the color of the borders individually using the border-color style and the order (top, right, bottom, left) described in the preceding item. For example:
```
 border-color: #FFF #000 #FFF #000; 
```
If you specify only one color, it will be used for all four locations. If two colors are specified, the first color will be used for the top and bottom borders and the remaining color for the right and left borders. If three colors are specified, the first color will be used for the top border, the second color will be used for the right and left borders, and the third color will be used for the bottom border.
border-[location] and border. As you have seen with other styles, you can combine the various elements that make up a border into a single ruleeither for a location or for a border as a whole. The syntax for this rule is
```
 border[-location]: width style color; 
```
For instance, if you wanted to set the top border of a block element to a 1px solid black line, you could use:
```
 border-top: 1px solid #000; 
```
If you wanted to set the border for an entire box to a 2px dashed blue line, you would use
```
 border: 2px dashed #00F; 
```

With borders out of the way, we can tackle margins and padding. For such simple styles, margins and padding cause a lot of headachesprimarily because it's difficult to imagine invisible space inside and outside a box, and secondarily because this space is sometimes rendered differently by different web browsers. Within both styles, you will again use the order of locations: top, right, bottom, left (TRBL).

margin-[location] and margin. Margins can be set using relative or absolute units of measurement, from pixels (px) to percentages (%). Both are common, but other units such as ems and inches can also creep into a style sheet. Margins are definitely something you'll want to try hands-on to get a feel for how the spacing is applied. The syntax for the margin style is simply
```
 margin[-location]: length OR percentage; 
```
For instance, if you wanted to set the bottom margin of a block element to 10px you could use
```
 margin-bottom: 10px; 
```
If you wanted to set the margin for an entire block element to 5px all around, you would use
```
 margin: 5px; 
```
If you wanted to set the margin to different sizes for all four locations you would use something like
```
 margin: 1px 2px 3px 4px; 
```
As in the border example, if you specify only one size, it will be used for all four locations. If two sizes are specified, the first size will be used for the top and bottom margins and the remaining size for the right and left margins. If three sizes are specified, the first size will be used for the top margin, the second size will be used for the right and left margins, and the third size will be used for the bottom margin.
padding-[location] and padding. Padding is represented exactly like margins, using relative or absolute units of measurement, from pixels (px) to percentages (%). The difference between padding and margins is where the space is located relative to the invisible box around the blog element. Padding surrounds the content within the borders, whereas margins surround the box outside the borders.
The syntax for the padding style is simply
```
 padding[-location]: length OR percentage; 
```
For instance, if you wanted to set the bottom padding within a block element to 10px, you could use
```
 padding-bottom: 10px; 
```
If you wanted to set the padding within an entire block element to 5px all around, you would use
```
 padding: 5px; 
```
If you wanted to set the padding to different sizes for all four locations, you would use something like
```
 padding: 1px 2px 3px 4px; 
```
As in the border and margin examples, if you specify only one size it will be used for all four locations. If two sizes are specified, the first size will be used for the top and bottom padding and the remaining size for the right and left padding. If three sizes are specified, the first size will be used for the top padding, the second size will be used for the right and left padding, and the third size will be used for the bottom padding.
width and height. Boxes need to have dimensions, and you can specify widths and heights of your block elements using the width and height styles, respectively. Any unit of measurement can be used, but pixels and percentages are most common. For instance, the following class specifies an element that is 150 pixels wide and 50 pixels high.
```
 .someBox {        width: 150px;        height: 50px; } 
```
Suppose that you wanted padding within elements of this class, such that 10 pixels of padding would appear on the left side and 15 pixels of padding on the right. You would add this line to the class definition:
```
 padding: 0px 15px 0px 10px; 
```
But you would also have to reduce the width of the class by 25 pixels because the actual display width of the element is going to be the width style plus the value of left padding (and margins) plus the value of right padding (and margins). So, if you also wanted 5 pixels of margin on either side, you would have to reduce the width even further:
```
 .someBox {        width: 120px;        height: 50px;        margin: 0px 5px 0px 5px;        padding: 0px 15px 0px 10px; } 
```
The same rule applies to the height property; if you use top and/or bottom margins and/or padding, reduce the value of the height property appropriately.