Question

我对此处提供的材料有疑问：w3schools.com code example

根据代码：

th,td
{
padding:5px;
}

填充：10px表示所有四个填充都是10px

那么为什么在实时代码上执行的脚本显示：从左到右的20-22px用于TH元素？

Answer 1

填充所有边的简写是一个数字。

padding: 10px;

这相当于

padding: 10px 10px 10px 10px;

是顶部，右侧，底部，左侧 - 顺时针顺序。

...或

padding 10px 10px;

这是顶部和底部的简写＆amp;左右......

但是你还必须记住，浏览器有自己的默认样式，可以给某些元素填充，边距等......

Answer 2

表格与其宽度成比例。因此，当table标记具有style="width:300px"属性时，表会被拉伸并且列会更大。但是，当您将其取出时，表会进行压缩，以使列没有额外的宽度。看起来像填充的内容实际上只是th和td元素的额外宽度。

我认为你会发现使用MDN或其他东西作为资源更容易，w3schools通过我在我学习的时候离开了很多次。大多数情况下，学校并没有很好地解释事情，并且容易错过宽度内联样式。

Answer 3

这是因为表格上设置了宽度。它影响单元宽度，在这种情况下是TH元件。填充是5px，但由于设置的宽度，它会增加细胞。

当表格设置了内联宽度样式时，您可以使单元格宽度均匀分布。这样就应用了px的填充，但是每个单元的宽度设置为100px。 300px（工作台宽度）/ 3（色板长度）

table {
  table-layout: fixed;
}

这是一种整齐均匀宽度列的方法。