CSS padding allows an HTML coder to set the default padding or dead space outside of an HTML element. The benefit of doing this is that it saves the coder from repeating that padding code for each instance of that element, and more easily creates consistency on the page. The HTML element to be padded can be any number of things, such as a paragraph, a table, or a heading.
To create padding in CSS, you'll first have to identify the HTML element that you want to pad. This element that you want to pad is known as the selector. Then, you'll want to specify the appropriate padding values. There are five different types of padding properties in CSS — one for all four sides of an element at once, and four others for each individual side of the element (e.g., the left side, the right side, the top side or the bottom side). A property that permits the programmer to specify values for all four sides of an HTML element at once is called a shorthand property.
The coding language used to specify one declaration of CSS padding is simply the word “padding.” Following that label, are the relevant "values" of the padding, or, information on the amount of space desired, usually represented either by pixels or a percentage. The padding and the values are written inside curly braces or curly brackets (i.e., "{" and "}"). Preceding all of that is the HTML element to be padded (e.g., "p" for the paragraph or "H2" for level 2 headers).
In terms of how the value is represented, values can be represented in pixels (e.g., 1px or 5px), points (e.g., 1pt or 5pt) or inches (e.g., 1in or 5in), or centimeters (e.g., 1cm or 5cm). Values can also be declared as a percentage of the HTML element being styled. If the value is 50%, for example, the padding will equal half the size of the element.
The following examples, are the HTML code for padding an HTML element by way of values reflected in a percentage and length, respectively. If only one value is assigned, then web browsers will assign this padding to all four sides of the HTML element.
padding:10%;
padding:100px;
Adding more values to the type of padding declaration above will cause web browsers to interpret them a certain way. If two values are assigned, the first will correspond to the top and bottom, while the second corresponds to the left and right. Three values will cause the first to refer to the top, the second to the left and right sides, and the third to the bottom of the HTML element. Assigning the maximum of four values causes the first, second, third, and fourth values to correspond to the top, right, bottom, and left of the HTML element, in that order. When more than one value is provided, they should be separated by spaces and ended with a semi-colon, for example:
padding:10px 20px 10px 20px;
Padding in CSS can be done one side at a time as well. In this regard, there are four more padding properties available. These are padding-top, padding-right, padding-bottom, and padding-left. To create padding in CSS in this more precise manner, you'll need to label the properties with the same syntax as the shorthand declarations as above. Each of these padding properties only takes one value in either length or percentage. For example:
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
The following code creates a webpage, declares the padding properties between style tags, and then uses them in a paragraph element specified by the p tag. The text between the /* and the */ are notes to explain the type of padding employed and would not be included in CSS padding code.
<html>
<head>
<style type="text/css">
p.example1 {padding:10px;} /* Short-hand padding for all four sides*/
p.example2 {padding:50px 30px;} /* Short-hand padding for the top and bottom followed by the left and right */
p.example3 {
padding-top:10px;
padding-bottom:20px;
padding-bottom:10px;
padding-left:20px;
} /* individual padding. */
</style>
</head>
<body>
<p class="example1">This text has the same padding on each side. The padding on each side is 10px.</p>
<p class="example2">This text has a top and bottom padding of 50px and a left and right padding of 30px.</p>
<p class=”example3”>This text has a top padding of 10px, a right padding of 20px, a bottom padding of 10px, and a left padding of 20px.</p>
</body>
</html>
In the example above, “example1,” etc., are names assigned to a class, which are then referenced in the paragraphs. The period between the p tag and the class names at the beginning of the code denotes a declaration of a class assigned to a paragraph. Notice the braces after the class declaration enclosing the padding property value assignments.
Though this might seem like a lot of work, it is far less labor intensive than specifying padding for each individual paragraph. You can declare one padding property for the desired element, which in the example above is the p tag, and then reference the class when you use the element between the body tags of the page. If only one type of padding is needed for all paragraphs, you don’t need to use classes at all. Simply use the following code between the style tags, and then code the paragraphs without specifying any class. This code would go between the body tags instead of the code in the above example.
p {padding:10px 20px 10px 20px;}
This CSS padding this would create would affect all paragraphs even though there was no class specified.
