3.1 Padding
The padding property (or filling) does not affect the actual distance between different elements, it defines the inner distance between the content and the border of an element. This can be used to good effect with most elements. There are five properties available for defining padding:
| Property | Description |
|---|---|
| padding-top | Defines the padding to the top of an element |
| padding-right | Defines the padding to the right of an element |
| padding-bottom | Defines the padding to the bottom of an element |
| padding-left | Defines the padding to the left of an element |
| padding | Compiles the above properties into one declaration |
For example, defining padding for the following heading tag changes how much filling there will be around the text, something that will be more apparent if we add a contrasting border or background colour to the headings too:
h1 { background:yellow; padding-top:10px; padding-right:20px; padding-bottom:40px; padding-left:80px; }
This would look like this in a browser:
Hello World!
When using the compiled padding property, the padding is specified in the following order: top, right, bottom and then left. For example:
h1 { background:yellow; padding:10px 20px 40px 80px; }
This sould set the padding to paragraph text to 10px top, 20px right, 40px botom and 80px left.
Hello World!
You may have noticed in the two previous examples that the right padding seems to have been ignored. This is not the case. Heading tags are block line elements, which will be explained later, but suffice to say their containing boxes expand to fill the space available. Had the heading content text been long enough to fill the page, then we would see that padding-right has not been ignored. For example, using the same code from the first two examples but adding more content: