HTML/CSS: Thêm khoảng cách trên và bên dưới văn bản kiểu đầu vào

Question

Sống dụ: http://jsfiddle.net/yDQXG/

Những gì tôi nhìn thấy trong Chrome: http://i.imgur.com/shLfA.png

tôi dường như không thể tìm ra nơi khoảng cách xung quanh các yếu tố đầu vào (những cánh đồng màu xanh) đến từ. Bất kỳ ý tưởng?

<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

Đó là vì chúng là các yếu tố nội tuyến. Điều tương tự xảy ra thường xuyên với hình ảnh.

Tất cả bạn cần làm là thêm display:block đến đầu vào của bạn:

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

đặt chiều cao dòng: 0px; trên .halfblock

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

Answer 3

Thêm thẻ display đến CSS của đầu vào:

input.blockheader { 
    display: block; 
} 

Vấn đề giải quyết.

Answer 4

Set:

.halfblock & .thirdblock tới:

line-height:0px 

Cũng xem xét các tùy chọn thêm một Đặt lại CSS

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