css - display：block空白

Question

このquirksmodeの記事によると、http： //www.quirksmode.org/css/display.html

ブロックには上下に空白があり、順序付けられている場合を除き、ブロックの横にHTML要素はありません。

上または下の空白はピクセルで示されていますか、それとも単に「空白」ですか？

Answer 1

与えられた文脈では、「空白」はひどい誤称です。テキストに関する空白は、非インラインブロックボックスのレイアウトに直接干渉してはなりません。ブロックボックスの間に表示されるのはマージン（通常は上記のボックス）であり、これは完全に異なります。

マージンは確かにピクセルで表されます。実際、CSSの長さの単位で表すことができます。仕様のmarginプロパティを参照してください。インラインで流れる要素の空白のピクセル長を直接指定しないでください。これは通常、font-size代わりに制御されますが、ブロックボックスを操作する場合は、まったく関係ありません。

Answer 2

「空白」は要素のマージンであり、任意の標準CSS単位（px、em、％など）を介して制御できます。

Answer 3

CSS要素のパディングまたはマージンプロパティを使用して、そのようなものを指定できます（ピクセルを含む任意のCSSユニットで）。あなたは多くの人が次のようなものを指定します：

.class 
{
   padding-left: 4px;
   padding-top: 3px;
}

パディングとマージンの違いは、表示に関係しています。paddingプロパティは、要素とその隣接要素の間に「空白」（要素の背後にあるものは何でも表示されます）を配置します。マージンは、コンテンツの周囲の要素のサイズを大きくします。余分なスペースは、現在の要素の背景として表示されます。