CSS - Padding
Here you learn how to format padding using CSS.
It is good to understand the difference between padding and spacing. "Padding" is the amount of space between your content and the edge of the area that contains it. "Margin" is the amount of space surrounding the outside of the area that has your content. In other words, padding is "extra space inside the border" and margin is "extra room outside the border".On the following tutorials I have set the background to yellow for the content area so I can show you where the padding is. Examples (1) and (2) have a simple padding element that applies to all sides. Examples (3), (4), (5), and (6) show you how to format each side. Example (7) shows you how to format all four sides with one statement by adding parameters for each site (the first parameter is for the top and then it goes clockwise - top/right/bottom/left).
CSS - Padding
External CSS File
This is your external CSS file named "stylesheet.css".|
.bg10 { background-color: #FEFE76; padding: 20px; } .bg11 { background-color: #FEFE76; padding: 0px; } .bg12 { background-color: #FEFE76; padding-top: 20px; } .bg13 { background-color: #FEFE76; padding-left: 20px; } .bg14 { background-color: #FEFE76; padding-right: 20px; } .bg15 { background-color: #FEFE76; padding-bottom: 20px; } .bg16 { background-color: #FEFE76; padding: 20px 20px 20px 20px; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="bg10">(1) This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around.</span><br><br> <span class="bg11">(2) This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding.</span><br><br> <span class="bg12">(3) This has padding only on the top. This has padding only on the top. This has padding only on the top. This has padding only on the top. This has padding only on the top. This has padding only on the top.</span><br><br> <span class="bg13">(4) This has padding only on the left. This has padding only on the left. This has padding only on the left. This has padding only on the left. This has padding only on the left. This has padding only on the left.</span><br><br> <span class="bg14">(5) This has padding only on the right. This has padding only on the right. This has padding only on the right. This has padding only on the right. This has padding only on the right. This has padding only on the right.</span><br><br> <span class="bg15">(6) This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom.</span><br><br> <span class="bg16">(7) This has 10 point padding all around. This has 10 point padding all around. This has 10 point padding all around. This has 10 point padding all around. This has 10 point padding all around.</span><br><br> </body> </html> |
||
This is how it looks
|
(1) This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around. This has 20 point padding all around. (2) This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding. This has zero padding. (3) This has padding only on the top. This has padding only on the top. This has padding only on the top. This has padding only on the top. This has padding only on the top. This has padding only on the top. (4) This has padding only on the left. This has padding only on the left. This has padding only on the left. This has padding only on the left. This has padding only on the left. This has padding only on the left. (5) This has padding only on the right. This has padding only on the right. This has padding only on the right. This has padding only on the right. This has padding only on the right. This has padding only on the right. (6) This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom. This has padding only on the bottom. (7) This has 10 point padding all around. This has 10 point padding all around. This has 10 point padding all around. This has 10 point padding all around. This has 10 point padding all around. |
||
Bookmark this page:
|
