padding

The padding of an element refers to the distance between the element itself and the border which surrounds that element. The element can be any object such as text or an image. Padding values are not inherited. Although decimal values are valid, negative values are not allowed. padding This property is used to set the distance of all four padding directions (top, bottom, right, left). Using a single padding value will result in a border 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 padding, and the second value for the left and right padding. 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). padding values length This value sets an absolute or relative length for the distance between the element (the 'thing') and the inside of the border. The 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 type. 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. EXAMPLES: P, H3 {padding 15pt, 10pt, 15pt, 10pt} This example will set the padding around the heading elements P and H3 to be 15 points for the top and bottom, and 10 points for the right and left. P {font-size: 2em; padding: 0.5em} This example will set the padding for the paragraph to be 1em on all sides. The 1em value is derived from multiplying the font size of 2em by 0.5.