次の CSS スタイルを使用して、div と span のアウトラインがある場所をデバッグします (通常はコメントのままにしておきます)。
div { outline: 1px dashed blue } span { outline: 1px dashed green }
これは div と span の外側の境界を示し、内側のオブジェクト/テキストに相対的なパディングのアイデアを提供しますが、同じスタイルに割り当てられたマージンがどこにあるかを視覚化するのには役立ちません。パディングとマージンの違いは理解していますが、ページを作成するときに視覚効果を確認できるようにする必要があります (詳細が多すぎる、注意力が不足している)。
スタイルの余白がどこにあるかを示す外側の長方形を追加する方法はありますか?
マージンが何であるかという目的に反するため、マージンの外側に境界線を許可する属性を私は知りません。W3のボックスモデルの説明
これは初期のWeb開発では優れた手法でしたが、Firebugをインストールしたり、Chromeの開発者ツールやSafariの「検査」機能などに慣れるために、数分かかることを強くお勧めすることはできません。コードにマウスを合わせるだけで、遠くまで行くことができます。手作りのデバッグスタイリングを何時間もいじり回すよりも多くのデータ。
あなたはそれらを気に入るはずです！
Firebugは特にコードのマウス操作を可能にし、メインボックス、色分けされたパディング、マージンなどを強調表示します。非常に貴重なツールです。Dreamweaverに組み込まれているビジュアルアウトラインツールよりも優れています。
私の知る限り、ありません。前述のように、Chrome の開発ツールまたは Firebug を使用することをお勧めします。これらのツールで得られる優れた特典は、その場で DOM を操作できることです。これにより、配置のテストが非常に迅速かつ簡単になります。div を右に配置しようとしている場合は、div を右クリックし、[inspect this element] を選択して、右側のプロパティを確認します。実際にこれらをリアルタイムで調整し、ページに反映された変更を確認できます。良いトリックは、多くのプロパティで、上下の矢印キーを使用して値を切り替えることができることです。これにより、margin-left または margin-right の値を簡単に調整できます。