The+Box+Model

The box model is an important concept in CSS. It dictates how elements are laid out. The box model is shown below: The innermost component is the content. Padding is applied outside the content area. Border is then applied outside of the padding area. Finally, margin is applied outside of the padding area. Margins specify the relationship between different elements. The relevant CSS commands are margin, border, and padding. Each one will be descried in more detail below.

__**Margin**__:

As we saw from the box model, margin is the space outside of the border, and is used to determine spacing among the different elements. In a box, there are four sides. So, we can specify margins up to the 4 sides:


 * margin-top
 * margin-right
 * margin-bottom
 * margin-left

A fifth property, [|margin], is used as a shortcut for the above four properties.

Margins can be specified in 3 ways: length, percentage, or auto. Let's take a look at an example:


 * #container {

margin-top:5px;

margin-left:10%;

margin-right:auto;

margin-bottom:20px;

border: 1px solid 000000;

} ||

The following HTML



This is an example for the margin

||

renders the following:


 * This is an example for the margin ||

Notice the margin between the box and the top, left, and bottom of the light green area are 5px, 10%, and 20px, respectively.

Margin shortcuts
All four margins can be specified on a single line using the **margin** property. The syntax is as follows:

<span style="background-color: #ffffff; color: #006600; font-family: 'PT Sans',sans-serif; font-size: 18px;">margin: [margin-top] [margin-right] [margin-bottom] [margin-left]

<span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">The order is very important here. The first element is always the top margin, the second is always the right margin, the third is always the bottom margin, and the fourth is always the left margin.

<span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">__**Border**__:

Common ways of specifying border properties in CSS include the following:


 * ====border - style====
 * ====border-width====
 * ====border-color====
 * ====border-top-, border-left-, border-bottom-, border-right-====
 * ====border====

<span style="background-color: #ffffff; display: inline !important; font-family: 'PT Sans',sans-serif; font-size: 18px;">The **border-style** property defines the format of the border. The table below shows the possible values and how each one renders.  <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">border-width <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">The **border-width** property specifies the width of the border. The value can be "thin", "medium", "thick", or a numerical width.  <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">border-color <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">The **border-color** property specifies the color of the border. <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">Examples below:  <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">border-top-, border-left-, border-bottom-, border-right- <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">Directions (top, left, bottom, right) can be combined with style, width, and color to form a 3-part CSS command. For example, **border-top-style** specifies the style of the top border. Some examples below:
 * CSS Declaration || Output ||
 * p {border-style:solid;} || Solid Border ||
 * p {border-style:dashed;} || Dashed Border ||
 * p {border-style:double;} || Double Border ||
 * p {border-style:dotted;} || Dotted Border ||
 * p {border-style:groove;} || Groove Border ||
 * p {border-style:ridge;} || Ridge Border ||
 * p {border-style:inset;} || Inset Border ||
 * p {border-style:outset;} || Outset Border ||
 * CSS Declaration || Output ||
 * p {border-width:9px; border-style:solid;} || Border Width 9px ||
 * p {border-width:medium; border-style:dashed;} || Border Width Medium ||
 * CSS Declaration || Output ||
 * p {border-color:#0000FF; border-style:solid;} || Border Color Blue ||
 * p {border-color:red; border-style:dotted;} || Border Color Red ||
 * CSS Declaration || Output ||
 * p {border-top-style:solid; border-bottom-style:dotted;} || Sample 1 ||
 * p {border-top-style:solid; border-top-width:medium;} || Sample 2 ||
 * p {border-left-style:solid; border-bottom-style:dashed;

border-bottom-color:#00FF00;} || Sample 3 ||  <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">border <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">If the characteristics for all 4 sides of the border are the same, they can be combined into a single line using the **border** property. In addition, all three border properties (**border-style**,**border-width**, and **border-color**) can be combined into a single line with the **border** command. <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">For example, with the CSS declaration,
 * p {

border:#0000FF 5px solid;

} || <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">The following HTML, <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">yields the output below: <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">A single line declares all border properties.
 * A single line declares all border properties. ||

__**<span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">Padding: **__

As we saw from the box model, padding is the space just outside the content area, and just inside the border area. In a box, there are four sides. So, we can specify paddings up to the 4 sides, plus a general padding property:

> <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">paddings can be specified in 3 ways: length, percentage, or auto. Let's take a look at an example: > > padding-top:15px; > > padding-left:5px; > > padding-right:30px; > > padding-bottom:40px; > > border: 1px solid 000000; > > } || <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">The following HTML > > This is an example for the padding > > || <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">renders the following: <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">Notice the padding between the box and the top, left, bottom, and right of the light green area are 15px, 5px, 40px, and 30px, respectively. > > ===<span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">padding shortcuts === > <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">All four paddings can be specified on a single line using the "padding" property. The syntax is as follows: > <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;"> padding: [padding-top] [padding-right] [padding-bottom] [padding-left] > <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">The order is very important here. The first element is always the top padding, the second is always the right padding, the third is always the bottom padding, and the fourth is always the left padding.
 * padding-top
 * padding-right
 * padding-bottom
 * <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">padding-left <span style="background-color: #ffffff; font-family: 'PT Sans',sans-serif; font-size: 18px;">A fifth property, padding, is used as a shortcut for the above four properties.
 * #container {
 * This is an example for the padding ||