{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:

  1. [top padding]
  2. [right padding]
  3. [bottom padding]
  4. [left padding]

3 values (not as commonly used):

  1. [top padding]
  2. [left/right padding]
  3. [bottom padding]

2 values:

  1. [top/bottom padding]
  2. [left/right padding]

1 value:

  1. [top/right/bottom/left padding]