Best IT Recipes

Horizontal line and the right way to encode it in html, css

I need to make a horizontal line after some block, and I have three ways to do this:

1) Define the h_line class and add css functions to it, for example

 #css .hline { width:100%; height:1px; background: #fff } #html <div class="block_1">Lorem</div> <div class="h_line"></div>

2) Use the hr tag

 #css hr { width:100%; height:1px; background: #fff } #html <div class="block_1">Lorem</div> <hr />

3) use it as an after alias

 #css .hline:after { width:100%; height:1px; background: #fff; content:"" } #html <div class="block_1 h_line">Lorem</div>

Which method is most practical?

+94
html css
Feb 11 '13 at 21:22
source share
9 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's how html5boilerplate does this:

 hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+90
Feb 11 '13 at 21:25
source share

I would go for semantic markup, use <hr/> .

If this is just the border, what you want, you can use a combination of indentation, border and margin to get the desired border.

+61
Feb 11 '13 at 21:24
source share

In HTML5, the <hr> defines a topic gap. In HTML 4.01, the <hr> is a horizontal rule.

http://www.w3schools.com/tags/tag_hr.asp

So, after defining, I would prefer <hr>

+11
Feb 11 '13 at 21:25
source share

If you really need a theme break , be sure to use the <hr> .



If you just want a design line, you can 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 class="block_1 hline-bottom">Cheese</div>
+5
Apr 24 '17 at 15:12
source share

My simple solution is to create hr with css to have zero top and bottom margins, zero border, 1 pixel height and a contrasting background color. This can be done by setting the style directly or defining a class, for example:

 .thin_hr { margin-top:0; margin-bottom:0; border:0; height:1px; background-color:black; }
0
Aug 26 '17 at 1:54 on
source share

it depends on the requirements, but many of the developers' suggestions are to make your code as simple as possible. so go with a simple hr tag and CSS code for that.

0
Sep 04 '17 at 17:04 on
source share

I wanted a long line like a line, so I used this.

 .dash{ border: 1px solid red; width: 120px; height: 0px; } 
 <div class="dash"></div>
0
Oct 12 '18 at 6:00
source share

 .line { width: 53px; height: 0; border: 1px solid #C4C4C4; margin: 3px; display:inline-block; } 
 <html> <body> <div class="line"></div> <div style="display:inline-block;">OR</div> <div class="line"></div> </body> </html>
0
Jan 20 '19 at 14:10
source share

 hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } 
 <div>Hello</div> <hr/> <div>World</div>
the selected text
-one
Feb 06 '18 at 0:10
source share


More articles:


All Articles