전산실짬밥/HTML & JavaScript

text 폼 위 아래 공백 넣긔

정훈승 2010. 10. 13. 15:44

예를 들어
<input type="text" name="id" maxlength="12" style="border-style:solid; border-width:1px; border-color:#d0d0d0; background-color:#f0f0f0; width:132px; height:25px; font-family:tahoma; font-size:9pt;">
라는 text폼을 그려보면
폼 상자의 세로가 25픽셀이고 텍스트 입력하는 커서가 위쪽에 있다. (IE기준)

흔히들 생각하는 바로는 테두리를 0px 주고
그 위에다가 table이나 div로 감싸서 테두리를 주더라. 이 무슨 무식한 방법인가 (사실 나도 옛날엔 이렇게 했음)





<input type="text" name="id" maxlength="12" style="border-style:solid; border-width:1px; border-color:#d0d0d0; background-color:#f0f0f0; width:132px; height:25px; font-family:tahoma; font-size:9pt; line-height:17pt;">
이런 식으로 줄간격을 적당히 주면 된다.
IE에서 딱 이쁘게 가운데에다가 써지고, 싸파리 브라우져에서도 역시 적용된다.