XHTML and CSS - Padding
Padding
The first thing we're going to do is make a title and change the background color so you can see what padding is.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { background-color: yellow; } </style> </head> <body> <h1>This is a header.</h1> </body> </html>
View that in your browser and you'll see it's just normal text in the top left of the screen. Padding is the space between the text and the background color, you set the padding with the padding property and setting it to the amount of padding you want.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { background-color: yellow; padding: 10px; } </style> </head> <body> <h1>This is a header.</h1> </body> </html>
Now when you view that in your browser you'll see that there is space between the text and the edge of the background color. You might not want padding the whole way around your element, you can set the padding in different directions with padding-top, padding-bottom, padding-left and padding-right.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { background-color: yellow; padding-left: 50px; padding-top: 75px; } </style> </head> <body> <h1>This is a header.</h1> </body> </html>
Now you'll see that there is only padding on the top and the left of your element.

Page generated in 0.0078 seconds.