horizontal line and right way to code it in html, css
HtmlCssHtml Problem Overview
I need to draw a horizontal line after some block, and I have three ways to do it:
-
Define a class
h_lineand add css features to it, like#css .hline { width:100%; height:1px; background: #fff }
#html
Lorem -
Use
hrtag#css hr { width:100%; height:1px; background: #fff }
#html
Lorem
-
use it like a
afterpseudoclass#css .hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
Lorem
Which way is the most practical?
Html Solutions
Solution 1 - Html
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;
}
Solution 2 - Html
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.
Solution 3 - Html
.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>
Solution 4 - Html
> In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the
> <hr> tag represents a horizontal rule.
http://www.w3schools.com/tags/tag_hr.asp
So after definition, I would prefer <hr>
Solution 5 - Html
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 class="block_1 hline-bottom">Cheese</div>
Solution 6 - Html
I wanted a long dash like line, so I used this.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}
<div class="dash"></div>
Solution 7 - Html
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;
}
Solution 8 - Html
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.
Solution 9 - Html
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
emphasized text
Solution 10 - Html
This is relatively simple example and worked for me.
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html