horizontal line and right way to code it in html css

Question

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  lt div class  block 1  gt Lorem lt  div gt   lt div class  h line  gt  lt  div gt    2  Use hr tag   css hr   width 100   height 1px  background   fff     html  lt div class  block 1  gt Lorem lt  div gt   lt hr   gt    3  use it like a after pseudoclass   css  hline after   width 100   height 1px  background   fff  content        html  lt div class  block 1 h line  gt Lorem lt  div gt    Which way is the most practical

User · Answer

I wanted a long dash like line  so I used this      x000D   x000D   dash  x000D          border  1px solid red  x000D          width  120px  x000D          height  0px  x000D   x000D    x000D   lt div class  dash  gt  lt  div gt  x000D   x000D   x000D

User · Answer

My simple solution is to style hr with css to have zero top  amp  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

User · Answer

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

User · Answer

x000D   x000D  hr   x000D      display  block  x000D      height  1px  x000D      border  0  x000D      border-top  1px solid  ccc  x000D      margin  1em 0  x000D      padding  0  x000D    x000D   lt div gt Hello lt  div gt  x000D   lt hr  gt  x000D   lt div gt World lt  div gt  x000D   x000D   x000D    Here is how html5boilerplate does it   hr       display  block      height  1px      border  0      border-top  1px solid  ccc      margin  1em 0      padding  0

User · Answer

I d go for semantic markup  use an  lt hr  gt    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

User · Answer

x000D   x000D   line   x000D    width  53px  x000D    height  0  x000D    border  1px solid  C4C4C4  x000D    margin  3px  x000D    display inline-block  x000D    x000D   lt html gt  x000D   lt body gt  x000D   lt div class  line  gt  lt  div gt  x000D   lt div style  display inline-block   gt OR lt  div gt  x000D   lt div class  line  gt  lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

In HTML5  the  lt hr gt  tag defines a thematic break  In HTML 4 01  the    lt hr gt  tag represents a horizontal rule    http   www w3schools com tags tag hr asp  So after definition  I would prefer  lt hr gt

User · Answer

x000D   x000D  hr   x000D      display  block  x000D      height  1px  x000D      border  0  x000D      border-top  1px solid  ccc  x000D      margin  1em 0  x000D      padding  0  x000D    x000D   lt div gt Hello lt  div gt  x000D   lt hr  gt  x000D   lt div gt World lt  div gt  x000D   x000D   x000D   emphasized text

User · Answer

If you really want a thematic break  by all means use the  lt hr gt  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   lt div class  block 1 hline-bottom  gt Cheese lt  div gt

[html] horizontal line and right way to code it in html, css

Examples related to html

Examples related to css