填充改变表格内的宽度答案

【问题标题】：Padding changes width inside table填充改变表格内的宽度
【发布时间】：2015-12-27 13:27:33
【问题描述】：

我有一个固定宽度的表格，在表格内我需要有一些与表格宽度相同的inputs(text)，但我不希望输入的文本位于left:0 ，我希望他们从左边有一些填充。但是当我将填充添加到这些输入时，宽度会更改为超过100%。

这里是 HTML：

<table cellspacing="25">
    <tr>
        <td><input type="text" placeholder="lalala"></td>
    </tr>
</table>

这就是 CSS。

table {
    background-color: red;
    width: 300px;
}
table input {
    width: 100%;
    padding-left: 10px;
}

如何保证输入元素的宽度是100%表格单元格的宽度？

【问题讨论】：

【解决方案1】：

将此 css 规则添加到您的输入中：

box-sizing: border-box;

box-sizing 属性用于告诉浏览器大小属性（宽度和高度）应该包括。

他们应该包括边界框吗？或者只是内容框。

这是一个sn-p：

table {
    background-color: red;
    width: 300px;
}
table input {
    width: 100%;
    padding-left: 10px;
    box-sizing: border-box;
}

<table cellspacing="25">
    <tr>
        <td><input type="text" placeholder="lalala"></td>
    </tr>
</table>

【讨论】：

【解决方案2】：

另一种选择是使用百分比计算输入的宽度和填充。如果元素的内容、边框、边距和填充的总和是100%，那么它应该符合您的要求。请参阅 css 中的 box-model 概念：http://www.w3schools.com/css/css_boxmodel.asp

所有的 HTML 元素都可以被视为盒子。在 CSS 中，术语“框在谈论设计和布局时使用模型”。

CSS 盒子模型本质上是一个包裹 HTML 的盒子元素，它包括：边距、边框、填充和实际内容。

盒子模型允许我们在元素周围添加边框，并定义元素之间的空间。

例如，如果您希望10% padding 位于左侧，则宽度应为90%。

CSS：

table {
    background-color: red;
    width: 300px;
}
table input { 
    width: 90%;
    padding-left: 10%;
}

【讨论】：

【解决方案3】：

您可以使用box-sizing: border-box; (support) 其中“宽度和高度属性包括内边距和边框，但不包括边距。” 在您的CSS 中将指定元素作为@ 1l13v 在他的回答中做了：

table input {
   box-sizing: border-box;
}

或者你可以使用calc函数（support）：

table input {
    width: calc( 100% - 10px );
}

【讨论】：

【解决方案4】：

表格的宽度将是宽度加上填充。尝试从宽度中减去一些百分比，如下所示：

table input {
  width: 90%;
  padding-left: 1em;
}

我也会将像素更改为 em，因为它们在不同的屏幕分辨率上更稳定。

【讨论】：