Why do webKit browsers render the following with extra padding/margin on the bottom?

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:

<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.

Did you try setting the height of the text box to match the div? It doesn't look like your telling it a height so it may be using a default height (based on the div). Just try it, no guarantees but hey it may.