input checkbox 여백 없애기

말자아이콘 전체게시물 작성일15-02-25 10:41 조회4,483회

본문

http://www.webmini.net/css/46401
찾아보다 그나마 정리가 잘 되어 있네요..

 

input 박스에는 여러가지가 있습니다. (라디오,체크박스,텍스트박스등)

 

여기에서 라디오 박스와 체크박스는 IE와 타브라우저에서 외곽여백의 차이가 있습니다.

이런경우를 잘모르는 웹디자이너 같은 경우 무조건 자기디자인 데로 해달라고 요구하곤하죠.. 그것도 익스에만 맞춰달라면서...참피곤한 경우죠. 물론 디자이너 입장에서는 그게 정답이고, 퍼블리셔 입장에서 맞춰주는것도 해야할일중에 하나일수는 있습니다. 그래서 협업이 중요한거 같습니다.

 

여튼 이럴때 해결방법입니다.

 

먼저 소스를 살펴보겠습니다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>웹미니 input 박스테스트</title>
<style type="text/css">
body {font:12px "돋움", Dotum;}
</style>
</head>

<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" /><label for="test">테스트</label>
</form>
</body>
</html>

 

위와 같은 소스를 출력하면 다음과 같습니다.

 

 CSS - 웹미니 : bb01.gif

 

익스와 파폭,사파리는 기본적으로 4px 이라는 외곽여백이 존재하며, 오페라는 3px 여백이 있었습니다.

세로여백은 top 라인에서 익스는 2px, 파폭과 사파리는 3px, 오페라는 0px 여백이 있었습니다. (여기서 사파리는 버전이 4입니다.)

 

그럼 여백을 초기화 해보기로 합시다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>웹미니 input 박스테스트</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font:12px "돋움", Dotum;}
</style>
</head>

<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" /><label for="test">테스트</label>
</form>
</body>
</html>

 

여기에서 초기화 방법도 여러가지겠지만, 저는 테스트로 * 를 사용했습니다.

body, table, div, input {margin:0; padding:0;} 이런식으로 해줘도 됩니다. 어떤방법이던간에 중요한건 input 에 여백을 0 으로 만드는겁니다.

 

 CSS - 웹미니 : bb02.gif

 

익스를 제외하고 타브라우저에서는 여백이 줄어든걸 볼수있습니다. (역시 익스는 끄덕없습니다. 어쩔~ -.-)

input 에 여백을 주지 않을경우는 많은 차이가 없었지만, 여백을 0 으로 하니 브라우저마다 보여지는 차이가 커졌습니다.

 

그럼 이걸 어떻게 맞출까? 방법은 여러가지 겠지만 class 로 input 에 직접 적용해보겠습니다. (물론 여백은 0 으로 했을때 입니다.)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>웹미니 input 박스테스트</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font:12px "돋움", Dotum;}
.input_m {width:13px; height:13px; vertical-align:middle;}
label {position:relative; top:1px;}

</style>
</head>

<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" class="input_m" /><label for="test">테스트</label>
</form>
</body>
</html>

 

CSS - 웹미니 : bb03.gif

 

가로 여백(1px) 은 익스와, 파폭, 사파리가 동일하고, 오페라는 2px 벌어졌습니다. 그리고 세로 여백은 사파리를 제외하고 모두 동일해졌습니다.
너무 붙어있는거 같으니, 조금 여백을 주도록하겠습니다.

.input_m {width:13px; height:13px; margin-right:4px; vertical-align:middle;}

 

CSS - 웹미니 : bb04.gif

 

사파리에서 약간의 차이가 있긴하네요. 이래서 핵이 필요한가 봅니다. -.-

위처럼 했는데도 디자이너가 모든브라우저에서 확인후 "어 사파리에서 텍스트가 조금 올라겠네요?" 라고 태클을 걸어온다면, 깔끔하게 핵을 써주세요. (체크와 라디오박스에서 핵사용없이 1px 오차도 없게 하는 방법이 있으면 알려주세요.)

 

다른방법으로는 * {margin:0; padding:0;} 을 준상태에서 익스만 여백이 그대로이기때문에 익스만 margin-right:-4px 로 주는 방법도 있긴합니다. (익스전용 핵을 사용해야겠죠)

 

어떻게 초기 구조화를 할건지는 제작할 사이트의 특성을 보고 판단하시기 바랍니다. ex) input 전체에 적용할것인가, 아님 class로 뺀후 부분부분만 적용을 할것인가... (차후에 유지보수할때 쉬운쪽으로..)

 

 

만족된 결과는 아니지만, 확인해보시고 또 다른 좋은 방법이 있으면 알려주세요.^^; (공유합시다.)

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 1 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 73 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 88 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 114 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 100 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 100 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 144 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 99 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 336 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 119 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 80 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 181 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1416 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1681 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1062 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4208 추천: 15
게시물 검색