Define Spacing in HTML
Hello all, in our last post we learned about List tags. Today we will discuss about few spacing tags in HTML.
While formatting web page sometimes we need to add few spaces just like we use tab in word document. We need to enter spaces manually to adjust in. But in HTML we can use tags to define spacing.
SPACING:
Horizontal Space: HSPACE
Example: <p><img src="logo.png" alt="Webhawk Media Services" hspace="50">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
HSPACE is mainly used to insert Horizontal spaces before and after an image. This tag is not supported in HTML5, we have to define it in CSS instead.
Vertical Space: VSPACE
Example: <p><img src="logo.png" alt="Webhawk Media Services" vspace="50">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
VSPACE is mainly used to insert Vertical spaces before and after an image. This tag is not supported in HTML5, we have to define it in CSS instead.
One Character Space:
Example: <p> The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Each is used for one character space.
Padding-Top:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-top:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Padding-Bottom:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-bottom:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Padding-Left:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-left:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Padding-right:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-right:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Happy Web Development...
What's Next?
In our next post we will learn how to align text in a web page.
While formatting web page sometimes we need to add few spaces just like we use tab in word document. We need to enter spaces manually to adjust in. But in HTML we can use tags to define spacing.
SPACING:
Horizontal Space: HSPACE
Example: <p><img src="logo.png" alt="Webhawk Media Services" hspace="50">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
HSPACE is mainly used to insert Horizontal spaces before and after an image. This tag is not supported in HTML5, we have to define it in CSS instead.
Vertical Space: VSPACE
Example: <p><img src="logo.png" alt="Webhawk Media Services" vspace="50">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
VSPACE is mainly used to insert Vertical spaces before and after an image. This tag is not supported in HTML5, we have to define it in CSS instead.
One Character Space:
Example: <p> The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Each is used for one character space.
Padding-Top:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-top:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Padding-Bottom:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-bottom:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Padding-Left:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-left:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Padding-right:
Example: <p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p style="padding-right:20px;">The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
<p>The Quick Brown Fox Jumps Over The Little Lazy Dog.</p>
Happy Web Development...
What's Next?
In our next post we will learn how to align text in a web page.
