I need to draw a horizontal line after some block, and I have three ways to do it:
1) Define a class h_line and add css features to it, like
#css .hline { width:100%; height:1px; background: #fff } #html <div>Lorem</div> <div></div> 2) Use hr tag
#css hr { width:100%; height:1px; background: #fff } #html <div>Lorem</div> <hr /> 3) use it like a after pseudoclass
#css .hline:after { width:100%; height:1px; background: #fff; content:"" } #html <div>Lorem</div> Which way is the most practical?
310 Answers
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }<div>Hello</div> <hr/> <div>World</div>Here is how html5boilerplate does it:
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } I'd go for semantic markup, use an <hr/>.
Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
2.line { width: 53px; height: 0; border: 1px solid #C4C4C4; margin: 3px; display:inline-block; }<html> <body> <div></div> <div>OR</div> <div></div> </body> </html>In HTML5, the
<hr>tag defines a thematic break. In HTML 4.01, the<hr>tag represents a horizontal rule.
So after definition, I would prefer <hr>
If you really want a thematic break, by all means use the <hr> tag.
If you just want a design line, you could use something like the css class
.hline-bottom { padding-bottom: 10px; border-bottom: 2px solid #000; /* whichever color you prefer */ } and use it like
<div>Cheese</div> I wanted a long dash like line, so I used this.
.dash{ border: 1px solid red; width: 120px; height: 0px; }<div></div>My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color. This can be done by setting the style directly or by defining a class, for example, like:
.thin_hr { margin-top:0; margin-bottom:0; border:0; height:1px; background-color:black; } it is depends on requirement , but many developers suggestions is to make your code as simple as possible . so, go with simple "hr" tag and CSS code for that.
0hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }<div>Hello</div> <hr/> <div>World</div>This is relatively simple example and worked for me.
hr { width: 70%; margin-left: auto; margin-right: auto; } 
