web-dev-qa-db-ja.com

マージンを折りたたむにはどうすればよいですか？

CSSでの余白の折りたたみ： http://www.w3.org/TR/CSS21/box.html#collapsing-margins

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

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

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

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

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

cssmargincollapse
36
Alex J

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

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

だから私は試しました：

<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>
27
Zenon

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;
}
16
andraaspar

FlexまたはGridレイアウトを使用します。

フレックスコンテナとグリッドコンテナでは、マージンの崩壊などはありません。

仕様の詳細：

3。Flexコンテナ：flexおよびinline-flexdisplay values

フレックスコンテナは、そのコンテンツの新しいフレックスフォーマットコンテキストを確立します。これは、ブロックレイアウトの代わりにフレックスレイアウトが使用されることを除いて、ブロックフォーマットコンテキストの確立と同じです。たとえば、フロートはフレックスコンテナに侵入せず、フレックスコンテナのマージンはその内容のマージンとともに崩壊しません。

5.1。グリッドコンテナの確立：gridおよびinline-grid表示値

グリッドコンテナは、そのコンテンツの新しいグリッドフォーマットコンテキストを確立します。これは、ブロックレイアウトの代わりにグリッドレイアウトが使用されることを除いて、ブロックフォーマットコンテキストの確立と同じです。フロートはグリッドコンテナに侵入せず、グリッドコンテナのマージンはそのコンテンツのマージンとともに折りたたまれません。

9
Michael_B

エリックマイヤーは彼の記事であなたの正確なポイントを参照しています 折りたたみ解除マージン 。

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

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

7
Mark Hurd

私の知る限り、視覚的な影響を与えないマージンの折りたたみを無効にするための巧妙なトリックの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はそのトリックを実行しているようです。

5
Nicu Surdu