CSS design: how to use the web border boader

Instance 1:

CSS:
P {padding: 15px; border: 1px solid black ;}
H5 {padding: 0px; border: 1px solid red ;}
XHTML:
<P> This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left. </p>
<H5> This header has no padding, which places the text right against the border! </H5>

 

Example 2:

CSS:
P {padding: 2%; border: 1px solid black ;}
H5 {padding: 0px; border: 1px solid red ;}
XHTML:
<P> This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom. </p>
<H5> This header has no padding. It is only spaced away from the paragraph because the paragraph has a padding of 5 pixels! </H5>

 

Example 3:

CSS:
P {padding-left: 5px; border: 1px solid black ;}
H5 {
Padding-top: 0px;
Padding-right: 2px;
Padding-bottom: 13px;
Padding-left: 21px;
Border: 1px solid red;
}
XHTML:
<P> This paragraph had one padding specified (left), using directional declaration. </p>
<H5> This header had each padding specified separately, using directional declaration.

 

Example 4:

CSS:
P {
Padding: 5px 15px;
Border: 1px solid black;
} 
H5 {
Padding: 0px 5px 10px 3px;
Border: 1px solid red;
}
XHTML:
<P> This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15 pixels. </p>
<H5> This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels, and a left padding of 3 pixels.