Question

.Text {
 width:500px;
font-size: 18px;
 font-family: Arial;
  color: #0000FF;
background-color: #F0E0F0;
 line-height: 1.16667;
border: 1px;
border-style: solid;
border-color: #FF8000;
 margin-left: 50px;
margin-right: 50px;
margin-top: 0px;
margin-bottom: 0px;
padding: 8px;
}

此处，<p>和<table>使用相同的班级"Text";

<p class="Text">
<table class='Text'>
 <tr style='vertical-align: baseline;'>
  <td style='text-align: left;'>something</td>
  <td style='text-align: left;'>something</td>
 </tr>
</table>
</p>

然而，资源管理器中的最终效果表明，<table>比<p>

更窄

为什么它们不一样，我给"Text"类一个固定的宽度！

Answer 1

padding未包含在content-box box-sizing模型的宽度中。使用border-box。

http://jsfiddle.net/8vVGT/

值得指出的是，<table>不是<p>的有效后代

width in与<p> HTML </p> <table> </table>中的宽度不同

1 个答案: