title: Reduce Or Remove Vertical Padding Of MDL Textfields
body: <p>I have a table that contains an MDL textfield.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Name
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="mdl-textfield mdl-js-textfield"&gt;
                  &lt;input class="mdl-textfield__input" id="name" type="text"&gt;
                  &lt;label class="mdl-textfield__label" for="name"&gt;Name&lt;/label&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Name
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="mdl-textfield mdl-js-textfield"&gt;
                  &lt;input class="mdl-textfield__input" id="age" type="text"&gt;
                  &lt;label class="mdl-textfield__label" for="age"&gt;Age&lt;/label&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However, this produces a very ugly result, because the textfields (and therefore the table cells) have a big vertical padding. The cell is 69px high, even though the textfield itself is 29px high.</p>
  
  <p>I have tried to remove the padding of the textfield via css, but that has completely destroyed its geometry. Removing the padding from the table row or altering its size does not change anything.</p>
  
  <p>Is there a way to remove or significantly reduce the vertical padding of the cell or table without damaging the textfield?</p>
  
  <p><b>EDIT:</b></p>
  
  <p>I have created a pen showing my problem. The padding is light blue, while the actual input element is colored purple:</p>
  
  <p><a href="https://codepen.io/anon/pen/BWRvrz?editors=1100" rel="nofollow noreferrer">https://codepen.io/anon/pen/BWRvrz?editors=1100</a></p>