6

拿这个 HTML。如果您从黄色框中取出“边框：1px 实心”，它的大小会发生很大变化（它会大大缩小）。

...为什么？

更新：如果我更改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 回答
0

我认为这是因为您没有在其中进行任何重置...试试这个...在您的 CSS 添加

*{margin:0px;padding:0px;}

现在尽可能多地提供边距和填充...它将起到魅力...试一试

我已经编辑了你的小提琴 http://jsfiddle.net/BbKED/1/

于 2013-04-04T05:06:53.290 回答