css - スタイルごとまたはパディング/マージン要素

Question

最近のHTML5とCSS3では、<br>マージン/パディングを使用できるときにタグの使用が眉をひそめていますか？

編集：これは私のユースケースのdiv要素間の間隔に関するものですが、一般的なベストプラクティスのアドバイスも歓迎します。

Answer 1

実際には、その使用法に関してかなり明確に定義されたルールがあり、最初に導入されたHTML2.0の時代を思い起こさせます。

この<BR>要素は、単語間の改行を指定します（6、「文字、単語、および段落」を参照）。例えば：

<P> Pease porridge hot<BR>
Pease porridge cold<BR>
Pease porridge in the pot<BR>
Nine days old.

要素自体は、<br>マージン/パディングを制御するために使用されることを意図したものではありませんでした。clear彼らはフローティング画像のようなものを処理するためにHTML3.2にプレゼンテーション属性を導入しましたが、CSSを支持してHTML4とXHTML1ですぐに非推奨になりました。それはほぼ15年前のことなので、まったく新しいことではありません。

HTML5では、<br>例を使用して、プレゼンテーションやレイアウトを目的としていないことがはるかに明確になっています（属性は廃止されていclearます）。

br要素は、詩や住所のように、実際にはコンテンツの一部である改行にのみ使用する必要があります。

次の例は、br要素の正しい使用法です。

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br要素は、段落内の主題グループを区切るために使用してはなりません。

br次の例は、要素を悪用しているため、不適合です。

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

上記の代替案は次のとおりです。正しいものは次のとおりです。

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

その<br>ため、CSSマージンの代わりにレイアウト目的で使用することは、少なくとも仕様を作成した人々によって常に嫌われてきました。

Answer 2

行の高さまたはマージン/パディングのどちらで作業するかによって異なります。