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

Question

我有一个包含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>

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

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

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

编辑：

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

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

Answer 1

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

mdl-textfield{
    padding: 0
}

删除填充。

mdl-textfield__label {
    top: 4px
}

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

mdl-textfield__label:after {
    bottom: 0
}

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

Answer 2

可以被认为是黑客的计算成本较低的解决方案是使用等于填充的负余量。

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

这里只覆盖了一条规则。

Answer 3

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

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

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

Answer 4

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

这不是解决这个问题的好方法，因为如果你研究“mdl-textfield”和“mdl-textfield__input”之间的函数。 “mdl-textfield__input”在乞讨的顶部，当用户输入输入字段时，“mdl-textfield”将位于顶部，这是多么有效，所以如果你只是更改边距，占位符的文本将被阻止。这两个div，“mdl-textfield”和“mdl-textfield__input”，可以通过javascript本身进行切换，所以这意味着你改变了边距，你打破了MDL的规则。