减少或删除 MDL 文本字段的垂直填充答案

【问题标题】：Reduce Or Remove Vertical Padding Of MDL Textfields减少或删除 MDL 文本字段的垂直填充
【发布时间】：2017-08-02 00:36:05
【问题描述】：

我有一个包含 MDL 文本字段的表格。

<table>
    <tr>
        <td>
            Name
        </td>
        <td>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" id="name" type="text">
                <label class="mdl-textfield__label" for="name">Name</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            Name
        </td>
        <td>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" id="age" type="text">
                <label class="mdl-textfield__label" for="age">Age</label>
            </div>
        </td>
    </tr>
</table>

但是，这会产生非常难看的结果，因为文本字段（以及表格单元格）具有很大的垂直填充。单元格是 69 像素高，即使文本字段本身是 29 像素高。

我试图通过 css 删除文本字段的填充，但这完全破坏了它的几何形状。从表格行中删除填充或更改其大小不会改变任何内容。

有没有办法在不损坏文本字段的情况下移除或显着减少单元格或表格的垂直填充？

编辑：

我创建了一支笔来显示我的问题。填充是浅蓝色的，而实际的输入元素是紫色的：

https://codepen.io/anon/pen/BWRvrz?editors=1100

【问题讨论】：

最好为您的问题创建一个minimal reproducible example，链接所有需要的库（使用sn-p 工具-<> 按钮）。需要它来检查问题并提供适当的答案。如果不提供它，您将大大降低获得答案的机会。

标签： html css material-design material-design-lite

【解决方案1】：

我通过使用以下样式实现了我想要的：

mdl-textfield{
    padding: 0
}

删除填充。

mdl-textfield__label {
    top: 4px
}

将标签设置到正确的位置。

mdl-textfield__label:after {
    bottom: 0
}

将动画移动到正确的位置。

【讨论】：

【解决方案2】：

一种计算成本较低但可能被视为 hack 的解决方案是使用等于填充的负边距。

.mdl-textfield {
    margin: -20px 0;
}

这里只有一个规则被覆盖。

【讨论】：

【解决方案3】：

有一种比将padding 设置为0px 并固定标签位置和动画更简单的方法。

您可以将.mdl-textfield边距设置为负数

.mdl-textfield {
  margin: -20px 0;
}

【讨论】：

【解决方案4】：

.mdl-textfield {
  margin: (any number);
}

这不是解决此问题的好方法，因为如果您查看 "mdl-textfield" 和 "mdl-textfield__input" 之间的函数。 “mdl-textfield__input”在乞求的顶部，当用户融合输入字段时，“mdl-textfield”将在顶部，这就是他们的工作方式，所以如果你只是改变边距，占位符的文本将被阻止。这两个 div,"mdl-textfield" 和 "mdl-textfield__input", 可以由 javascript 自己切换，所以这意味着你改变了边距，你违反了 MDL 的规则。

【讨论】：