html - 边框流过表格但不流过带内联显示的段落

Question

使用 HTML 和 CSS。

我使用 display:inline 将文本包围在边框中使边框比文本大。问题是边框与某些周围的 block 级元素重叠。它与 <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>

结果:

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

跟进:我有 display:inline 的全部原因是为了使边框仅与文本一样宽。如果使用 display:block (<p> 的默认值)然后边框与父元素一样宽。

Answer 1

P 标签不是普通的 block 级元素。它在大多数用户代理中的默认状态指定了一些顶部和底部边距。 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