확인란을 감싸는 div에 테두리를 설정하는 방법은 무엇입니까?

div를 만들려고하는데 그 크기는 확인란의 치수와 정확히 같습니다. 이와 같이 지정하면확인란을 감싸는 div에 테두리를 설정하는 방법은 무엇입니까?

<html> 
    <head> 
     <style type="text/css"> 
      .wrapper { 
       margin: 12px; 
       width: 13px; 
       height: 13px; 
       border: 1px solid green; 
       display: inline-block; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="wrapper"><input type="checkbox" /></div> 
    </body> 
</html>

크롬과 Firefox의 녹색 테두리와 확인란 사이에 작은 여백이 생깁니다. div의 높이를 줄이면 상단에 영향을주지 않고 div의 아래쪽 경계를 높입니다. 나는 체크 박스에서 여백을 가지고 노려 보았지만 그 차이는 영향을주지 않았다.

여기에이 동작을 나타내는 jsfiddle이 있습니다.

감사합니다,

유전자

출처

2012-02-09 Gene Golovchinsky

그런데 'width : 13px; 높이 : 13px;'(레이아웃에 맞는지 확인하기 위해 필요한 경우가 아니라면). '.wrapper '에있는'display : inline-block'은 자동으로'input'에 맞을 것임을 의미합니다. – thirtydot

: http://jsfiddle.net/thirtydot/hpZqK/5/

또는, .wrapper에 line-height: 0을 설정 http://jsfiddle.net/thirtydot/hpZqK/6/

를

input은 inline-block으로 처리되므로이 작업을 수행해야합니다.

출처

2012-02-09 00:36:38 thirtydot

이것은 그 것이다. 나는 막 게시하려고했다. – elclanrs

감사합니다. 그건 의미가 있습니다. 차단하기 위해'display' 속성을 변경하고 싶습니다. 'line-height' 해결책은 잘 동작합니다. –

해키 수정 - 체크 박스 -2px top의 제공 : .wrapper input에 display: block 설정 http://jsfiddle.net/hpZqK/4/

출처

2012-02-09 00:27:05 Joe

좋습니다. 하지만 이것이 왜 필요한지 ... 생각하고 싶습니다. –

이것은 실제로 작동하지 않으며, 당신이 말했듯이, 다소 해킹입니다. @thirtydot 솔루션은 갈 길입니다. – elclanrs

나는 그것이 정말로 효과가 있고, 바이올린에 방황하는 것을 동의하지 않는다. P 의심 할 여지없이 해킹이 될 것이고, 30 가지가 더 깨끗한 해결책이다. – Joe

확인란을 감싸는 div에 테두리를 설정하는 방법은 무엇입니까?

답변

관련 문제