html - 水平線とそれをhtml、cssでコーディングする正しい方法

Question

いくつかのブロックの後に水平線を引く必要があります。それを行うには3つの方法があります。

1）クラスh_lineを定義し、それにcss機能を追加します。

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2）hrタグを使用する

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3）after疑似クラスのように使用する

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

どちらの方法が最も実用的ですか？

score 163 · Accepted Answer

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

html5boilerplateがそれを行う方法は次のとおりです。

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

score 67 · Accepted Answer

セマンティックマークアップを使用します。を使用し<hr/>ます。

必要な境界線でない限り、パディング、境界線、マージンを組み合わせて使用して、目的の境界線を取得できます。

score 11 · Accepted Answer

HTML5 では、<hr>タグはテーマの区切りを定義します。HTML 4.01 では、 <hr>タグは水平線を表します。

したがって、定義後、私は好むでしょう<hr>

10 に答える 10