margin

The margin is what is used to set the box size around the element. It is the area between the border to the edge of the box. margin This property is used to specify the margin area of an element's box. This area is transparent, and will display the background color of the document. Using a single value will result in a margin which is equidistant on all sides. The rules for specifying more than one value are as follows: If you use two values, the browser will use the first value for the top and bottom margins, and the second value for the left and right margins. If you use three values, the browser will use the first value for the top, the second value for the left and right, and the third for the bottom. If four values are used, the browser assigns the first value to the top, the second to the right, the third to the bottom, and the fourth to the left. These values may be a mixture of absolute values (such as millimeters or pixels), or relative values (such as em or ex units). margin values length The length measurement options for this value are: • mm millimeters. • cm centimeters. • in inches. • pt points, which is a way of measuring the font size. One point is 1/72 (one seventy-second) of an inch. • pc picas, which is yet another way of measuring font size. One pica is equal to 12 points. • px pixels, which is one screen element. The display you're looking at is comprised of thousands of individual dots, each of which can change in color and luminosity to achieve the desired image. Each of these dots is referred to as a pixel. • ex x-height settings, which is the height of the font's lower case letter 'x'. • em em setting. One em is equivalent to the width of a capital letter in the chosen font. Millimeters, centimeters, inches, points, and picas are considered to be absolute lengths because you're specifying the exact size of the value. Relative units such as em and ex are interpreted as references to the parent font size. Percentage This value sets the length for the distance between the element (the 'thing') and the inside of the border as a percentage of that element. auto This value will automatically set the margin around the element to the browser's default setting. EXAMPLE: P {margin: 10px} This example will set the margin around the entire element to a width of 10 pixels. P {margin: 10px 20px} This example will set the top and bottom margins to a width of 10 pixels, and the right and left margins to a width of 20 pixels. P {margin: 10% 20% 10% 20%} This example will set the width of the top and bottom margins to 10 percent of the element width, and the right and left to 20 percent of the element width.