How to create a vertical line in HTML- Tutorialpath

Welcome to all our readers on our website at www.tutorialpath.com. As you all know that here on our website we will provide you lots of information related to the latest and newly introduced technology which help you to get updated with the latest tech. Here you will get all the useful information which is required in this tech world. As you know technology is one of the trending part in this world. So, here again we came up with a latest and new tech information which is related to the process of creating vertical line in HTMLWith the help of this article you will get to know the complete process of how to create vertical line in HTML in a step by step manner. So, simply have a look to this article and grab all the useful information which is going to be very helpful for you.

How to create a vertical line in HTML

vertical line in HTML
vertical line in HTML

Use the border-left or border-right property to create a vertical line. The height property is used to determine the height of the boundary (vertical line) element. The position property is used to determine the position of the vertical line.

The following example will create a vertical divider line between two images. You can increase the line height simply by increasing the value of the height property.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Tutorialpath Make a Vertical Line in HTML</title>
  • <style>
  •     .vertical-line{
  •         display: inline-block;
  •         border-left: 1px solid #ccc;
  •         margin: 0 10px;
  •         height: 125px;
  •     }
  • </style>
  • </head>
  • <body>
  •     <img src="images/new.jpg" alt="Club Card">
  •     <span class="vertical-line"></span>
  •     <img src="images/spa.jpg" alt="Spade Card">
  • </body>
  • </html>

HTML Horizontal

HTML | <hr> Tag

The <hr> tag in HTML is for a horizontal rule and is used to insert a horizontal rule or thematic break into an HTML page to split or separate documents. The <hr> tag is an empty tag and does not require the last tag.

Tag Attributes: The table below describes the <hr> tag attributes:

ATTRIBUTE VALUE DESCRIPTION
Align left
center
right
Used to specify the alignment of the horizontal rule.
Size pixels Used to specify the height of the horizontal rule.
Width pixels Used to specify the width of the horizontal rule.
noshade noshade Used to specify the bar without shading effect.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML hr tag</title>
    </head>
    <body>
        <p>There is a horizontal line.</p>
        <hr>
        <p>This is a horizontal rule above this paragraph.</p>
    </body>
</html>  

Output:

There is a horizontal line.


This is a horizontal rule above this paragraph.

Conclusion:

So, hopefully we had shared all the basic steps which help you to vertical line in HTML. If you are using any of the above given browser and the steps helps you to enable or disable the JavaScript then simply share this article with others and also tell us by dropping a comment in the comment section below so that we get to know how helpful this article is for you all.

Related Topic

Here are some more FAQ related to this topic:

  • How to change the color using CSS
  • How to add border to an element on mouse hover without affecting the layout in CSS
  • How to place border inside of a DIV element using CSS

Leave a Reply

Your email address will not be published. Required fields are marked *