Html 边框在表格上流动，但不在内联显示的段落上流动

使用HTML和CSS

我使用

display:inline

将文本用边框包围，使边框略大于文本。问题是边界与周围的某些块级元素重叠。它与

和

重叠，但不与

重叠

CSS:

HTML:

一些段落文本

一些有边框的文本
一些段落文本

一些有边框的文本
表格文本

结果:

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

Follow：我之所以使用

display:inline

，完全是因为边框与文本一样宽。如果使用

display:block

（默认值为

），则边框与父元素一样宽。

它以您期望的方式处理块级元素。所有块级元素都不重叠

但是带边框的文本不是块级元素，因为您将其设置为内联框。如果将带边框的文本放在

内，或放在它自己的

内，或去掉

显示：inline

，则将获得预期的框级布局

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

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

---

p标记不是普通的块级元素。它在大多数用户代理中的默认状态指定一些上下边距。桌子标签没有。因此P标记将内联div推得更远

---

当带边框的文本位于a内（而不是a）时，渲染结果看起来非常准确。为什么相邻的和之间的重叠不同？在

旁边有一个

和一个

div

之间的区别在于相邻的

是块级格式的，而

div

是内联格式的。

<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>

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