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

No there is not. And I will tell you a little story on why it is not. But first, quick solutions:

a) Use CSS class for basic elements span/div, e.g.: :

.vr{ 
   display: inline-block; 
   vertical-align: middle; 
   /* note that height must be precise, 100% does not work in some major browsers */
   height: 100px; 
   width: 1px; 
   background-color: #000;
}

Demonstration of use => https://jsfiddle.net/fe3tasa0/

b) Make a use of a one-side-only border and possibly CSS :first-child selector if you want to apply a general dividers among sibling/neigbour elements.

The story about FITTING in the original paradigm,
but still not being there:

Many answers here suggest, that vertical divider does not fit the original HTML paradigm/approach ... that is completely wrong. Also the answers contradict themselves a lot.

Those same people are probably calling their clear CSS class "clearfix" - there is nothing to fix about floating, you are just clearing it ... There was even an element in HTML3: . Sadly, this and clearance of floating is one of the few common misconceptions.

Anyway. "Back then" in the "original HTML ages", there was no thought about something like inline-block, there were just blocks, inlines and tables.

The last one is actually the reason why does not exist.
Back then it was assumed that:
If you want to verticaly divide something and/or make more blocks from left to right =>
=> you are making/want to make columns =>
=> that implies you are creating a table =>
=> tables have natural borders between their cells => no reason to make a

This approach is actually still valid, but as time showed, the syntax made for tables is not suitable for every case as well as it's default styles.

---

Another, probably later, assumption was that if you are not creating table, you are probably floating block elements. That meaning they are sticking together, and again, you can set a border, and those days probably even use the :first-child selector I suggested above...