Padding samples

Block element padding sample

These are html tags you type.


Within the style container in the head,
or within a separate style sheet file:
      .samples
        {
        width:        60%;
        border:       8px green solid;
        padding:      30px;
        margin:       50px;
        }

            <h1 class="samples">  
            This is the heading 
            </h1>  
            <div class="samples">  
            This is the div 
            </div>  
            <p class="samples">  
            This is the p 
            </p>  

This is the resulting web page content:


This is the heading

This is the div

This is the p



Padding on span sample

These are html tags you type.


Within the style container in the head,
or within a separate style sheet file:
      .samples
        {
        width:        60%;
        border:       8px green solid;
        padding:      30px;
        margin:       50px;
        }

            <p class="samples" style="width:20%">  
            This is some text with padding on a scan element
            The span text is <span class="samples">BAD</span>.
            It does not work well.
            </p>  

This is the resulting web page content:


This is some text with padding on a scan element The span text is BAD. It does not work well.