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

advertisements

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.

Related Articles

Why Safari & amp; Firefox cut the bottom of the input text?

What I want Chrome On Chrome, the input text looks normal. What is happening Firefox Safari As you can see, the input text is being slightly cut off at the bottom on Firefox and majorly cut off on Safari. How can I fix that? If anyone could help w/ t

Why does jQuery animate () forcing the bottom of my page down?

Here is the site in question: http://igs.link-networkonline.com/campaign-landing-page/ You can see all the boxes function as they should but when you hover over any of they the bottom of the page extends down further. This used to happen the the div

Why can not I delete the bottom line of my UITableView?

When the user presses Edit, my UITableView adds an insert row at the top (with a green plus), and puts all the other rows into delete mode (red minus). Alternatively, the user can swipe-to-delete without pressing the edit button. I am using a couple

Why use Async / Wait at the bottom

I would like to get some clarification on what is the added benefit of using of Await and Async all the way down. If my application is calling await Func1() (So no blocking to the UI here). and Func1 is calling await Func2(), but the results from Fun

Why does this loop print the bottom line three times?

import java.util.ArrayList; import java.util.Collections; public class AmusementPark { private ArrayList<Ticket> tickets; private ArrayList<Merchandise> merchandise; private String name; AmusementPark(String name){ this.name=name; this.tickets

Repaint slow down with CSS via Javascript in webkit browsers

I've been working on a slideshow script that uses CSS3 transitions, or jQuery's animate when they are unavailable. I've created a custom function to do the slide animations, which does so appropriately. Everything seemed to be working fine, but I've

Unexpected margin in Webkit browsers

I'm having an issue with a 2-column, fluid layout. Both columns are inside of a div (.dp_stage_sizer) with overflow: auto; .spl_aside is floated to the left, spl_main is just plain-old position: relative with a margin-left. This works fine so long as

Remove the padding / margin from DataGridView Cell

I have an issue with DataGridView. The default cell style has some margin or padding that makes all row higher than I need. I set Height property in RowTemplate to a smaller value (i.e. 15 px) but now the cell cut lower signs like underscore ('_') an

Phantom Padding / Margin / Space at the bottom of my page

I have had some issues with phantom space that keeps popping up randomly and annoyingly at the bottom of my pages for a site Ive been working on with another developer. Ive looked in dragonfly dozens of times and i cannot find anything with extra pad