{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
Padding is an inner, invisible border around your element.
<style type="text/css">
.box {
border: 2px solid CadetBlue;
background-color: Gainsboro;
}
</style>
<div class="box">
Hello, world!
</div>
Apply a padding to the box, which will push all child elements away from the borders. This is done with one or several of the padding properties called
- padding-top
- padding-right
- padding-bottom
- padding-left:
<style type="text/css">
.box {
border: 2px solid CadetBlue;
background-color: Gainsboro;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
</style>
<div class="box">
Hello, world!
</div>
Padding shorthand property
The padding property simply directs your values out to the padding-top, padding -right, padding -bottom and padding -left properties,
so it's just another way of using the CSS syntax, which will shorten your code in many situations.
<style type="text/css">
.box {
border: 2px solid CadetBlue;
background-color: Gainsboro;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
<div class="box" style="padding: 10px 10px 10px 10px;">
Box
</div>
<div class="box" style="padding: 10px 10px;">
Box
</div>
<div class="box" style="padding: 10px;">
Box
</div>
When specifying paddings, the following rules apply:
4 values:
- [top padding]
- [right padding]
- [bottom padding]
- [left padding]
3 values (not as commonly used):
- [top padding]
- [left/right padding]
- [bottom padding]
2 values:
- [top/bottom padding]
- [left/right padding]
1 value:
- [top/right/bottom/left padding]