37

CSS でマージンを折りたたむ: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

機能の目的は理解していますが、レイアウトをしようとしていて、それをオフにする方法がわかりません。

CSS チュートリアルで通常説明されている方法は、次のいずれかです。

  1. 境界線を追加する
  2. パディングを追加する

これらのすべてには、背景画像と固定パディングを使用したピクセル パーフェクトなレイアウトを扱う場合に明らかになる副作用があります。

余分なピクセルをレイアウトに押し込むことなく、単純に折りたたみを無効にする方法はありますか? このような動作を変更するためにドキュメントに視覚的な影響を与える必要があることは、私にとっては意味がありません。

4

5 に答える 5

27

崩壊を「壊す」には、その間に何かが必要です。

私の最初の考えは、間に設定されたdivを使用することdisplay:noneでしたが、それはうまくいかないようです。

だから私は試しました：

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

これはうまく機能しているようです（少なくともFirefoxでは、テストするためにここにInternet Explorerをインストールしていません...）

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>
于 2009-12-01T21:07:26.060 に答える
16

IE8から次のことができます：

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS の場合:

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}
于 2013-06-17T09:38:34.090 に答える
7

Eric Meyer は、彼の記事Uncollapsing marginsであなたの正確なポイントを参照しています。

彼のアプローチについては、図 6 の後の記事のテキストを参照してください。彼は、通常は 1 ピクセルのパディング/ボーダーが適していると述べていますが、追加のピクセルを追加する柔軟性がない場合には、非常にシンプルなソリューションを提供します。

ただし、各要素のマージンを手動でオーバーライドする必要があるため、特定のケースで機能するかどうかはわかりません。

于 2009-12-01T21:40:53.853 に答える
5

私の知る限り、視覚的な影響のないマージンの折りたたみを無効にするための巧妙なトリックの 1 つは、親のパディングを次のように設定すること0.05pxです。

.parentClass {
    padding: 0.05px;
}

パディングは 0 ではなくなったため、折りたたみは発生しなくなりましたが、同時にパディングが十分に小さいため、視覚的には 0 に切り捨てられます。

他のパディングが必要な場合は、マージンの崩壊が望ましくない「方向」にのみパディングを適用しますpadding-top: 0.05px;。

作業例: 

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

編集:値を から0.1に変更しました0.05。この小さなテストから、Firefox は0.1pxパディングを考慮しているようです。しかし、0.05pxうまくいくようです。

于 2016-02-24T09:52:17.917 に答える