実際には画面に表示されないスペースや領域の値を変更しようとしているので、ボックス モデルを操作するのは難しいと思います。
http://www.w3.org/TR/CSS2/box.html
Web ページ内の要素の周囲にこれらの境界を表示する方法またはオプションはありますか?これは、デバッグ中または物事を正しく調整しようとしているときに役立ちますか?
これに使用できるスマートなJavascript関数でしょうか?
これらは、いくつかの色の細い線を使用して描画できます。境界線だけを強調表示できたとしても、それは役に立ちます。これを使用した例は <IMG src="image.jpg" style="show_box_grid_lines:true" />. このオブジェクトが使用する実際の境界線を確認できるようにすることで、このオブジェクトが画面で占める領域を確認するオプションがあると便利です。
可能または今日存在するようなものはありますか?
1.) Firefox の最新バージョンをダウンロードします。
2.) ページの任意の場所を右クリック > [要素を検査] をクリックします。
3.) 右下の 3D 立方体ボタンをクリックします。
これにより、ページ上のすべての要素が互いに積み重なって表示されます。特定の要素を選択して、それらの幅と高さを確認できます。Firefox のインスペクターで使用できるツールは他にもたくさんあります。見てみな！
計算行の各セットを (実際のページで) 直接表示することはできませんが、outlineスタイルを使用してもレイアウトには影響しません (レイアウトでスペースを取りません。境界線はスペースを取り、レイアウトに影響します)。アウトラインは、コンテンツ ボックス全体に線を引きます。
http://www.w3schools.com/css/css_outline.asp
もちろん、Chrome/IE の開発者ツール、または Firefox の Firebug を使用して、ボックス モデルの表現と有効なピクセル値を確認できます。ピクセル値はツールのペインに表示され、マージンとコンテンツ領域は、ツールのペインで要素をホバリング/選択している間、コンテンツの周りの半透明のボックスとして表示されます。
outlineスタイルを使用するときは、すべてのボックスを表示する必要がある場合があります。