いuncollapseるのか。[重複]

StackOverflow https://stackoverflow.com/questions/1828804

  •  11-09-2019
  •  | 
  •  

質問

この質問に答えはこちら

崩壊マージンをCSS: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

理解している 目的と特徴, が、うまいレイアウト、いよいのかをoffにします。

の通常説明していCSSのチュートリアルが次のいずれかに

  1. 追加ボーダー
  2. 追加のパディング

すべてのこれらの副作用するときはついにクレイアウトとの背景に画像固定paddings.

必要があります。だけを無効に崩れずに故-パー-メッツの損失は別のピクセルのレイアウト?なによるものなのかということであって視覚的に影響する文書変更を行うことです。

役に立ちましたか？

解決

だけでなく、あなたは崩壊します。

「ブレーク」に間に何かが必要

私が最初に考えたの間で設定display:noneでのdivを使用していたが、それは動作するようには思えません。

私が試します：

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

（少なくともFirefoxで、インターネットエクスプローラが...それをテストするためにここにインストールされていない）うまく仕事をするように思われます。

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

他のヒント

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

使用するFlexまたはグリッドレイアウトます。

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

スペックで詳細ます：

  

の 3。フレックスコンテナ：flexとinline-flex display   値のの

     

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

     

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

     

グリッド容器は、そのための新しいグリッド書式コンテキストを確立します   内容。これは、ブロックのフォーマットコンテキストの確立と同じです   そのグリッドレイアウトを除いて代わりにブロックレイアウトの使用されている：山車はしないでください   Gridコンテナ内に侵入し、グリッドコンテナのマージンはやります   その内容の余白に崩壊します。

エリック・マイヤーは彼の記事 Uncollapsingマージンの中にあなたの正確な位置を指します。

彼のアプローチについては、図6の後に記事のテキストを参照してください。彼は、1pxのパディング/ボーダーは一般的に移動するための方法ですが、その追加のピクセルを追加するには柔軟性がありませんインスタンスのためにかなりシンプルなソリューションを提供することを言及しています。

これは、手動しかし、各要素のマージンをオーバーライドすることを伴うので、私はそれはあなたの特定のケースのために働くかはわからない。

ひっきりフレキシビリティを無効率崩れることのない視覚の影響として知する設定のパディング親会社の 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 seemesいですよね。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top