HTML/CSS : 텍스트 형 입력 위와 아래에 여분의 간격

라이브 예 : http://jsfiddle.net/yDQXG/HTML/CSS : 텍스트 형 입력 위와 아래에 여분의 간격

내가 크롬에서 볼 : http://i.imgur.com/shLfA.png

내가 알아낼 수없는 경우 입력 요소 주위의 간격 (파란 들판)이 온다. 어떤 아이디어?

<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>

출처

2012-11-17 JohnB

외부 스타일 시트는 캐시 할 수 있기 때문에 훨씬 더 좋은 옵션입니다. 페이지 로딩 속도가 더 빠릅니다. –

차이점은 무엇입니까? –

@NullPointer, 이것이 단지 예일뿐입니다. 귀하의 의견은 실제로 솔루션에 기여하거나 질문을 명확히하는 데 도움이되지 않습니다. – Mikuso

인라인 요소이기 때문입니다. 같은 일이 이미지에 자주 발생합니다.

당신이 당신의 입력에 display:block을 추가하면된다 : 또한을 추가 할 수있는 옵션을 고려

line-height:0px

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; 
}

출처

2012-11-17 18:24:37 coopersita

폭스 문제를 다루는 경우 firefox에서는 작동하지 않을 것이다. 입력의 디스플레이 블록은 입력이 오버플로를 일으킬 것이다. 그 컨테이너. @ KingKingFrog 아래 답변은 저에게 큰 도움이되었습니다. – Lowtrux

set line-height : 0px; .halfblock에

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

출처

2012-11-17 18:21:49 Brian

입력의 CSS에 display 태그를 추가

input.blockheader { 
    display: block; 
}

문제 해결.

출처

2012-11-17 18:23:50

설정 :

.halfblock & .thirdblock에 CSS 재설정

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

출처

2012-11-17 18:24:48 KingKongFrog

HTML/CSS : 텍스트 형 입력 위와 아래에 여분의 간격

답변

관련 문제