Observations on mysterious margins

Sometimes a mysterious margin is making your life difficult. Even though you specify margin:0; padding:0;

When building comments for this blog I ran into a weird margin under the textarea. It only happened on Webkit (Safari & Chrome). As wondering how to get rid of it I remembered that sometimes images display a small margin even when all margins are set to 0. And how I got around it, was simply to float the images. Same trick worked for the textarea.

There is probably a reason why it’s like that, usually you want to have a small gap between images or textareas.

Demo

Update:

Seemingly you get rid of this issue by setting vertical align bottom.


input, textarea {
    margin:0;
    vertical-align:bottom;
}

Source.

Club-Mate, the beverage → club-mate.fi