Using CSS to create stylish web page layout often uses objects called
boxes. Layout boxes are made by using one or more of the following
property families:    margin, padding and border.

Margins are a style element that provides a cushion of space around a
element on a web page; for example a margin around a paragraph of text.

On this page the body selector has a left margin of 80 pixels created by the
margin property. That means the text begins 80 pixels from the left browser
window. The following red text has a margin of 150 Pixels on the left and 40 pixels
on its top. The text is positioned 40 pixels down from this text line.

The margins defined for a page element apply to the container that element
is in. If the element is text in the body of the page then the container
is the browser window itself. If the element of text is inside another
elelment such as a box then the margins defined for the text will apply
to the space inside the box and not to the entire browser window.

Sometimes this is explained using the terms parent and child. An element's
margin exists relative to parent's element (that is, the element it exists in).

There are 5 common margin properties. They are:

margin-top, margin-right, margin-bottom, margin-left and margin.

Their values are length and %. Here is an example:

{margin-top: 100px; margin-left: 20%;}

This definition would display the page element 100 pixels from the top and
20 % of the window width from the left (of its parent element).

The margin shortcut property defines all four margin sides in the sequence
of top, right, bottom, left like this example:

{margin: 20px 50px 50px 100px;}

The padding propteries are:

padding-top, padding-right, padding-bottom, padding-left and padding.

Their values are length and %.

Padding is similar to margins in that padding creates an area of empty space
around an element, for example around text. Whereas margins provide
space from the outer container element in toward the text element, in contrast,
padding provies space from the text element outward toward the container element.
Margin space surrounds padding space. See the diagram above.

Padding can also have a background style in it, and border styles around its premieter,
whereas, margins do not.  Here are some examples.

Box code:

In the above example you see a padding of 10 pixels around the text
with a background color of #ffe07b. Notice that the right padding
(and margin) is relative to the browser window size. If you resize
the right side of the browser window by dragging it toward the left then the right
padding will change its dimension. To solve this and create a fixed
right side dimension to a box add the width property.

By adding the property and value of width: 390px; to the above padding rule
now the right side of the box is fixed and independent of the browswer window
size.

Padding values can be specified per each side of the element:

{padding-left: 20pt; padding-top: 10pt;} for example. Or, as a
shortcut with top, right, bottom and left as the sequence:

{padding: 10px 20px 10px 20px;}. Padding and margins can also
be written with one value that is applied to all four sides, like this:

{padding: 10px;} and all four sides has the value of 10 pixels.

Border properties complete the box model of CSS. Border values will define
various types of lines around the padding properties of a box.

Some of the border properties include:

border-width, border-style, border-color and the border shortcut.

Border-width values include: thin, medium, thick, and lenght.
Border-style values include: dotted, dashed, solid,and double.
Border-color values include: name, hex color and rgb.
Here is an example of a border style:

.box {border-width: medium; border-style: dotted; border-color: rgb(255,120,92);}

And, the boder shortcut uses the property values in this sequence:
boder-width, boder-style, border-color. Here is a shortcut example:

.box {border: thin solid red;}



Box example 1

Here is the css rule for the above box:

.box-1 {font: 12px arial; color: red; margin: 15px 20px 00px 150px;
	background-color: #FFe07b; padding: 10px; width: 390px;
	border: thin dashed blue; background-image: url('dots.gif');}

Box example 2

Here is the css rule for the above box:

.box-2 {font: 14px courrier; color: white; margin: 15px 20px 00px 150px;
	word-spacing: 3px; letter-spacing: 2px;
	background-color: #ff9f4c; padding: 10px; width: 480px;
	border: 5px double red;  }

Box example 3

Here is the css rule for the above box:

.box-3 {font: bold 14px courrier; color: white; margin: 15px 20px 00px 150px;
	word-spacing: 3px; letter-spacing: 2px; 
	background-image: url('red-fade.jpg'); padding: 15px; width: 300px;
	border: 1px solid blue;}

To Top