css - CSS:ボックスモデルでマージンエッジがどこにあるかをユーザーに示すにはどうすればよいですか

Question

次の点を考慮してください。

ページ上の要素の位置を表示するデバッグ クラスを作成しています。上（破線の外側）のマージンエッジを表示したいのですが、これは内側のマージンエッジであるため、境界線を使用できないことに気付きました。これどうやってするの？

Answer 1

outlineと組み合わせて を設定するのがおそらく最善の方法ですoutline-offset。outlineボーダーに似ていますが、レイアウト内のスペースを占有せず、ルールのセットが少し異なります。1pxdivの境界線と 10px の余白を指定すると、次のようなアウトラインを追加できます。

div {
  border: 1px solid black;
  margin: 10px;
  outline: 1px solid red;
  outline-offset: 10px;
}

MDN の詳細: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

残念ながらoutline-offset、IE ではサポートされていません。それをサポートする必要がある場合は、他の回答に従って疑似要素ルートをたどる必要があります。

Answer 2

ボックスモデルはこれを防ぎます。

元の投稿のように、ボックスの余白はコンテンツのサイズに含まれていません。これを変更marginしpaddingないと、疑似要素でのみ実行できます。

http://jsfiddle.net/Fcwkw/1/

クラスだとおっしゃったので、Javascriptでdivのマージンを取得し、疑似パディングをマージンに設定するだけです。