HTML/CSS: Extra spacing above and below text-type input

Question

Live example: http://jsfiddle.net/yDQXG/

What I see in Chrome: http://i.imgur.com/shLfA.png

I can't seem to figure out where the spacing around the input element (blue fields) is coming from. Any ideas?

<form method="get">
<fieldset class="halfblock">
    <input class="blockheader" type="text" value="Field A">
    <textarea class="blocktext" rows="5">Line 1&#13;&#10;Line 2</textarea>
</fieldset>
</form>

Answer 1

It's because they are inline elements. Same thing happens often with images.

All you need to do is add display:block to your inputs:

input.blockheader {
    margin: 0;
    padding: 0;
    text-align: center;
    background: #ABD9E2;
    font: 11px/11px 'Vollkorn', serif;
    border: none;
    width: 100%;
    position: relative;
    /* top: -7px; */

    display: block;
}

Answer 2

set line-height: 0px; on .halfblock

.quote_body .halfblock {
    width: 262px;
    border: 1px dotted 
    #333;
    float: left;
    margin-bottom: 15px;
    line-height: 0px;
}

Answer 3

Add the display tag to the input's CSS:

input.blockheader {
    display: block;
}

Problem solved.

Answer 4

Set:

.halfblock & .thirdblock to:

line-height:0px

Also consider the option of adding a CSS reset

http://meyerweb.com/eric/tools/css/reset/