HTML / CSS: Extra Spacing Above and Below Text Input

Question

Real-time example: http://jsfiddle.net/yDQXG/

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

I can't figure out where the spacing around the input element comes from (blue fields). 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

This is because they are inline elements. The same thing happens often with images.

All you have 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 a display tag to the CSS input:

 input.blockheader { display: block; } 

The problem is resolved.

Answer 4

Set:

.halfblock and .thirdblock:

 line-height:0px 

Also consider adding CSS reset

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