Delphinidin

The CSS box model is a collection of properties that define the amount of space around an element, its dimensions, its margins, its borders, and padding between the content of the element and the borders. Around the outside of an element is space called the margin, inside of the margin is the border, inside of the border is the padding, and inside of the padding is the content of the element. In the coming sections, I pick apart the various properties that comprise the box model in CSS, beginning with margin.

- Margins
The margin property applies space outside the box, between the box and the browser window, or between the box and the other elements in the document. The following code shows the various margin properties.

{margin: [ <length> | <percentage> | auto ];}
{margin-top: <length> | <percentage> | auto;}
{margin-right: <length> | <percentage> | auto;}
{margin-bottom: <length> | <percentage> | auto;}
{margin-left: <length> | <percentage> | auto;}

Box model shorthand properties are always specified in a clockwise order, from the top: top, right, bottom, and left.

Every modern browser today supports the DOCTYPE switch, a method of selecting the rendering mode of your browser based on the Document Type Declaration that appears at the top of an HTML document. If you structure your documents like the examples you see here in this book, you’ll never encounter quirks rendering mode, but if you are working with legacy websites that must maintain backward compatibility with the Web of yesterday, chances are you’ll encounter a quirks mode site sooner or later. If you encounter quirks mode, you’ll also discover that some CSS features don’t work in quirks mode, but do work in standards mode. Aligning an element using the auto keyword in conjunction with the margin property is one such quirks mode incompatibility. In IE, this feature is only implemented in standards mode. There is a workaround due to a bug in IE, using the text-align property on an element with values of left, center and right as appropriate.

- Borders
Borders appear between the margin and padding. Borders put lines around boxes. Applying borders usually makes the other box model properties easier to see. The following sections examine each border property.

-- Border-width
The border-width properties all control the width of a box border in some fashion. The following code outlines each border-width property.

{border-top-width: <border-width>;}
{border-right-width: <border-width>;}
{border-bottom-width: <border-width>;}
{border-left-width: <border-width>;}
Initial value: medium

{border-width: <border-width>;}
Initial value: medium

A <border-width> value refers to one of the following: thin | medium | thick | <length> The individual border-top-width, border-right-width, border-bottom-width, and border-left-width properties exist for setting the width of the individual sides of a box. Each of these properties can be combined into the single border-width shorthand property.

Borders aren’t allowed to have percentage values; however, they are capable of accepting any length measurement supported by CSS (em, pixel, centimeter, and so on). In addition to length units, the border width may also be specified using one of three keywords: thin, medium, and thick. These are rarely (if ever) used in professional code, however. Most commonly the border-width properties will be given a length value in pixels.

-- Border-style
You use the border-style property to specify the style of border to be used. The border-style property is very similar to the border-width property presented in the previous section in that it uses an identical syntax to specify the style of border to be used for each side of the box. The following code outlines the border-style family of properties.

{border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;}
Initial value: none

{border-top-style: <border-style>;}
{border-right-style: <border-style>;}
{border-bottom-style: <border-style>;}
{border-left-style: <border-style>;}
Initial value: none

Like the border-width property, the border-style property is also a shorthand property, which combines the individual border-top-style, border-right-style, border-bottom-style, and border-left-style properties into the single border-style property.

-- Border-color
The border-color property is yet another shorthand property. Like the border-style and border-width properties, you can use border-color to control how a border is styled. The border-color property, as you may have guessed, specifies the border color for each side of the box. The following code outlines the border-color family of properties.

{border-color: [ <color> | transparent ];}
Initial value: the value of the ‘color’ property

{border-top-color: <color> | transparent;}
{border-right-color: <color> | transparent;}
{border-bottom-color: <color> | transparent;}
{border-left-color: <color> | transparent;}
Initial value: the value of the ‘color’ property

IE 6 and IE 7 do not support the transparent keyword as applied to border color; in IE, the transparent keyword is rendered black. Like border-style, margin, and border-width, the border-color property can accept up to four values. This property accepts a <color> value, meaning that it can accept a color keyword, a hexadecimal value, a short hexadecimal value, or an RGB value; any color value accepted by the color property is also acceptable to the border-color properties. When the border-color property is not specified, the border-color is the same color as specified for the color property, i.e., the text color.

BORDER SHORTHAND PROPERTIES
The border-top, border-right, border-bottom, border-left, and border properties combine the border-width, border-style, and border-color properties into single properties for each side of the box, or all sides of the box. The following code outlines the possible values for these fi ve properties.

{border-top: <border-width> || <border-style> || <color>border-right;}
{border-right: <border-width> || <border-style> || <color>border-right;}
{border-bottom: <border-width> || <border-style> || <color>border-right;}
{border-left: <border-width> || <border-style> || <color>border-right;}

{border: <border-width> || <border-style> || <color>;}

The notation for the border-top, border-right, border-bottom, border-left, and border properties indicates that one to three values are possible; each value refers to a border-width value, a border-style value, and a border-color value. Unlike the margin shorthand property, the border property may only be used to specify all four sides of the box at once. If you want a different style, or width, or color for the different sides, you’ll need to use the individual shorthand properties.

Read More:
The Box Model: Controlling Margins, Borders, Padding, Width, and Height in CSS - Part 2