Question

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

...为什么？

更新：如果我将p更改为内联块，则大小保持不变。那么，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/

Answer 1

在这里： -

Margin Collapsing

相邻的兄弟姐妹

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>

Answer 2

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

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

现在尽可能多地给出边距和填充...它会起到魅力......给它一个镜头

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

设置包含div的边框会显着改变其大小

2 个答案:

相邻的兄弟姐妹

父母和第一个/最后一个孩子

空块