padding

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value No
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-padding

Description
It determines value of fields round an element contents. Field is called the distance from internal border of an element framework to the imagined rectangle limiting its contents (fig. 1).


The parameter padding allows to specify size weeding for all parties of an element at once or to define it only for the specified parties.

Syntax

padding: value | auto {1, 4}

Arguments
It is allowed to use one, two, three or four values dividing them among each other by space. This effect depends on amount of arguments. It is given in the table below.





Tab.1. Color changing depending on arguments' amount
Argument amount Result
1 Frame color will be set for all element's sides
2 The first argument sets the color of top and bottom sides and the second one for left and right sides
3 The first argument defined the color of the top side, the second one - left and right sides at the same time, the third one - for the bottom side
4 The color of top, bottom, right and left sides is set in turn



It is possible to specify a field size in pixels (px), percent (%) or other admissible units for CSS. The argument auto specifies that the size of fields will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>padding</title>
  <style type="text/css">
   .layer {
    background: #fc3; /* Background color */
    border: 2px solid black;  /* Frame parameters */
    padding: 20px; /* Fields around the text */
   }
  </style>
 </head>
 <body>
 
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2

Object model

[window.]document.getElementById("elementID").style.padding
Fibre Channel vs. ISCSI
IT virtualization
Network Virtualization
Server Virtualization