WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Create a Vertical Line in HTML

Topic: HTML / CSSPrev|Next

Answer: Use the CSS border Property

You can use the CSS border property on a <span> element in combination with the other CSS property like display and height property to make vertical lines in HTML.

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

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>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/club.jpg" alt="Club Card">
  •     <span class="vertical-line"></span>
  •     <img src="images/spade.jpg" alt="Spade Card">
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.