6

この HTML を見てください。その「border: 1px solid」を黄色のボックスから取り出すと、大きさが大きく変わります（かなり縮みます）。

...どうして？

更新: pas inline-block を変更しても、サイズは変わりません。それで、そのpタグが問題のようです...しかし、外側のdivの境界線がインラインタグのサイズを劇的に変えるのはなぜですか?

<body style="height:100%">

  <div style="background-color: red; border-style:solid;">
    <div style="background-color: yellow; border:1px solid;">
      <p>Inside</p>
    </div>
    <p>Something</p>
  </div>


  <div style="background-color: blue; border-style:solid;">
    <p>Something else </p>
  </div>

</body>

デモンストレーション: http://jsfiddle.net/C2D49/

4

2 に答える 2

5

どうぞ ：-

マージン崩壊

隣接する兄弟

The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). For example: <p>The bottom margin of this paragraph is collapsed...</p> <p>...with the top margin of this paragraph.<p>

親と最初/最後の子

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

空のブロック

If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

このフィドルを見てください-スパンをいくつか追加しただけで、今は崩壊しません。 http://jsfiddle.net/aPaBy/

<div style="background-color: red; border-style:solid;">
   <div id="test" class="border" style="background-color: yellow;">
     <span>hi</span>
      <p>Inside <button>Test</button></p>
     <span>hi</span>
    </div>
    <p>Something</p>
  </div>
于 2013-04-04T04:23:34.820 に答える