1

ここでそのような質問をするのはかなり馬鹿げているので、誰かが私を助けてくれることを願っています。私はウェブデザイナーではありませんが、基本的なレイアウトを作成する作業に追われています。レイアウトは標準ブラウザを備えた統合デバイスで使用されるため、ブラウザ固有のCSSタグの一部..つまり、-moz-border-radiusは必ずしもIEなどで機能する必要はありません。

いくつかのブロックセクションを配置したい1024x768ページがあります。これらのセクションには、すべての側に4pxのスペースがあります。したがって、2x2グリッドのサイト全体の外側には4pxのギャップ(黒)があり、内側にはボックス間に8pxのギャップがあります(1つのボックスの右側に4px、左側に4px、または下部に4px) 1つ、上部に4pxなど)

これらのdivのCSSをそれぞれmargin:4pxに設定すると、私は4pxの外側のギャップを取得します。また、ボックスの左側と右側の間に8pxの水平方向のギャップがあります。問題は、クォーターボックスの1つが上または下のマージンを適用していないように、垂直方向の間隔が4pxであることです。これは起こるはずのことではないと思うので、どこかで間違えたと思います。

事前に感謝します-この場所は素晴らしいです。

4

2 に答える 2

2

これは「マージンの崩壊」によるものです。最も単純なケースでは、隣接する最小の垂直マージンは無視されます。

于 2010-11-18T23:18:21.277 に答える
2

マージンの代わりにパディングを使用してみてください。

2つのオブジェクト間の最大マージンは、それらの間のスペースとして使用されます。

object_aマージンが4で、マージンが6の場合object_b、それらを並べて配置すると、マージンは6になります。

パディングを使用すると、それらの周りにより多くの泡が作成され、距離が結合されます。

object_aパディングが4で、パディングが6の場合object_b、それらを並べて配置すると、パディングは10になります。


更新-@BobbyJackに感謝します

水平方向のマージンが崩れることはありません。垂直のみ。

于 2010-11-18T23:19:42.637 に答える