Question

我在表格单元格中有这个div容器：

<table style="width: 100%; background:transparent" border="0" cellspacing="0" cellpadding="0">

  <tbody><tr>
    <td>

        <!-- This div is making troubles -->   
        <div style="margin: 0; border: 1px solid blue; background-color:#CAE2F0; align:right; font-size: 150%; font-weight: bold; text-align:center;margin-right:5px;padding:  0;">
          <p>Themensuche</p>
        </div>

    </td>
    ...
    ...
  </tr></tbody>
</table>

没有什么特别的，没有实验，没有浮动，一切都是静止的。

只要div具有正常边框，一切看起来都很好：

<div style="margin: 0; border: 1px solid blue; ...

Div with borders Box model with borders

这是问题所在。一旦我将边框设置为0，边框和div的大部分内部空间就会被切断：

<div style="margin: 0; border: 0; ...

Div without borders Box model without borders

我已经检查过Chrome和Mozilla边缘。是什么导致浏览器切断内部空间？这违背了我对盒子模型的完全理解。你怎么建议我开始调试这个？

感谢您的关注。

Answer 1

问题是p默认的顶部和底部margin在我们的情况下是25px，父级的边框取消了这个顶部和底部margin崩溃。要解决您的问题，请从段落中删除margin并将等效的padding-top添加到父级div和padding-bottom，您可以看到我的解决方案here

Answer 2

一个简单的解决方案可能是将边框颜色设置为与内容背景相同的值。

JSFiddle

background-color:#CAE2F0;

Answer 3

<p>代码的默认余量为24px top和bottom。当您向父div添加边框时，它会覆盖该边距top和bottom。当您移除border的{{1}}时，它不会覆盖div个margin标记的默认<p>。

如果您希望保持div的高度，只需将overflow: hidden;添加到div

查看此演示http://jsfiddle.net/amoljawale/e2rah/

Answer 4

而不是使用，尝试将div设计为表格。

供您参考http://snook.ca/archives/html_and_css/getting_your_di。

在表格中使用div可能会产生意外的响应。

CSS边框属性比边框更改

4 个答案: