Is there a vr (vertical rule) in html?

Question

I know there is a hr (horizontal rule) in html, but I don\'t believe there is a vr (vertical rule). Am I wrong and if not, why isn\'t there a vertical rule?

Answer 1

For people who're trying to make columns for text, there's a column-rule property which you should consider using!

.content{
  margin: 20px 5%;
  padding: 5px;
  
}
.content p{
  -webkit-column-count: 3;
  -moz-column-count:3;
  -o-column-count:3;
  column-count: 3; 
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  -o-column-rule: 1px solid #ccc;
  column-rule: 1px solid #ccc;
 
  text-align: justify;
}

<div class="content">
  <p>
    Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.



  </p>
  
  
</div>

Answer 2

HTML has little to no vertical positioning due to typographic nature of content layout. Vertical Rule just doesn't fit its semantics.

Answer 3

You can use css for simulate a vertical line, and use the class on the div

.vhLine {
  border-left: thick solid #000000;
}

Answer 4

Try this.

You can set height and width on "div", like the scope for "hr".

The margin of "hr" is used to alignment.

<div style="display: inline-flex; width: 25px; height: 100px;">
  <hr style="margin: 0px 0px 0px 12.5px;">
</div>

Answer 5

You can make a vertical rule like this: <hr style="width: 1px; height: 20px; display: inline-block;">

Answer 6

Too many overly-complicated answers. Just make a TableData tag that spans how many rows you want it to using rowspan. Then use the right-border for the actual bar.

Example:

<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>

Ensure that the "&nbsp" in the second line runs the same amount of lines as the first. so that there's proper spacing between both.

This technique has served me rather well with my time in HTML5.