边界流过表但没有内联显示的段落

Question

使用HTML和CSS。

我使用display:inline使用边框包围文字，使边框比文字大。问题是边界与某些周围的块级元素重叠。它与<table>和<form>重叠，但不与<p>重叠。

CSS：

.bordered {
  padding: 0.6em;
  border-style: solid;
  border-width: 2px;
  background-color: #FFFFCC;
  border-color:#E8E800;
  display: inline;
}

HTML：

<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<table><tr><td>Table text</td></tr></table>

结果：

这是为什么？为什么不同的块级元素之间不一致？我希望表格单元格文本与段落的垂直对齐方式相同。

跟进：我display:inline的全部原因是边框只有文字宽。如果使用display:block（<p>的默认值），则边框与父元素一样宽。

Answer 1

P标记不是vanilla块级元素。大多数用户代理的默认状态指定了一些顶部和底部边距。 TABLE标签没有。所以P标签将内联DIV推得更远。

margins on P tag http://homepage.mac.com/estranged/images/css01.png

margins on TABLE tag http://homepage.mac.com/estranged/images/css02.png

Answer 2

是以您期望的方式执行块级元素。没有任何块级元素重叠。

但是带边框的文本不是块级元素，因为它使它成为内联框。如果您将带边框的文本放在<p>内，或者放在它自己的<p>内，或者摆脱display: inline，那么您将得到一个符合预期的盒级布局。

更新：另一种解决方法是将表格上方的内容放在div（不是内联）中，然后使用相同但透明的边距和填充来设置div。

.blockMargin {
  padding-bottom: 0.6em;
  border-width: 2px;
  border-color: transparent;
}