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 How To Create a Vertical Line in HTMLWith the help of this article you will get to know the complete process of how to create How To Create a 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

How To Create a Vertical Line in HTML
vertical line in HTML

How To Create a Vertical Line in HTML – Must Follow Process

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, as of now we had shared all the useful information related to How To Create a Vertical Line in HTML which will going to very helpful for you. This article will help you to understand all the details and steps in a proper manner. Also, if you like this article then simply share this article with others as well so that they also understand all the details and information easily. On the other side, if you find any error in this article or if you have any query related to this article then simply drop a comment in the comment section below so that we will get to know that what issue you are facing and also we can reply to your query instantly.

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 *