Question

This issue is minor but is bugging me, why do webKit browsers render the following with extra padding/margin on the bottom? is the only way to solve this to specify heights?

<div style="background-color:#efefef; width:200px;">
  <textarea style="padding:0px; margin:0px;"></textarea>
</div>

Render:

Answer 1

<div style="background-color:#efefef; width:200px;">
    <textarea style="display:block;">asdf</textarea>
</div>

Apparently, it has something to do with <textarea> being an inline element. The gap appears to be the area below the baseline. If you set display:block;, it will get rid of the gap.