次のスクリプトがあります。ポートレット クラスの動作がおかしい:
各ポートレットの周囲に 10 ピクセルを追加する必要があります。これは、ポートレット間に 20 ピクセルのギャップを意味する必要があります。何らかの理由で、ポートレットの右または左にウィジェットがある場合は 20px しか得られませんが、ポートレットの上または下に別のポートレットがある場合は 10px しか得られません。
垂直方向に 10px になるのはなぜですか?
3 に答える
11
余白は足し合わないので、潰れます。A と B の 2 つの要素があり、A margin=10px と B margin=15px の場合、A と B の間隔は 15px になります。
2 つのソリューション:
- margin-bottom: 20px、margin-top: 0px を使用
- それらをコンテナにラップし、パディングを適用します: 10px 0;
于 2011-03-14T11:05:09.190 に答える
7
マージンは縮小されるため、追加されず、単にmax()-ed (隣接するオブジェクトの最大のマージン値が使用されます)。スペースが要素の一部である場合は、パディングを使用します。
于 2011-03-14T11:04:25.917 に答える
5
これがマージンの仕組みです。隣接する垂直マージンは互いに折りたたまれます:
通常のフローで、ブロック レベル ボックスの 2 つ以上の隣接する垂直マージンが崩壊します。結果のマージン幅は、隣接するマージン幅の最大値になります。負のマージンの場合、隣接する負のマージンの絶対値の最大値が、隣接する正のマージンの最大値から差し引かれます。正のマージンがない場合、隣接する負のマージンの絶対最大値がゼロから差し引かれます。ノート。隣接するボックスは、兄弟または祖先として関連していない要素によって生成される場合があります。
関連項目:余白の縮小
于 2011-03-14T11:05:45.943 に答える