표시/숨기기시 여백/패딩 범핑 div

Question

두 개의 라디오 버튼이 포함 된 div가 있습니다. 텍스트 상자를 표시하거나 숨 깁니다.

<p>Some text</p> 
<div> 
    <div> 
     <input id="show" name="radioGroup" type="radio" value="1" /><label for="show">Show</label> - 
     <input id="hide" name="radioGroup" type="radio" value="0" /><label for="hide">Hide</label> 
    </div> 
    <div class="myTextBox"> 
     <input type='text'> 
    </div> 
</div> 

<p>Some text</p>​ 

내가 표시/

는 .myTextBox 다음 텍스트가 픽셀의 몇 범프 숨 깁니다. 이것은 텍스트 상자에 여백 & 여백 때문입니다.

이러한 설정 (패딩/여백)을 제거하지 않으면 CSS 충돌을 제거 할 수 있습니까? here를 참조

는

Answer 1

jsFiddle http://jsfiddle.net/nTJZN/1/에 예를 참조하십시오.

기본적으로 show()과 hide() 대신에 visibility 속성이 변경됩니다.

function ShowHideTextbox() 
{ 
    if($("#show").is(":checked")) 
     $(".myTextBox").css('visibility','visible'); 
    else 
     $(".myTextBox").css('visibility','hidden'); 
} 

Answer 2

사용자의 입력 상자에 입력 상자가 표시 될 때 성장 라인을 일으키는 원인이되는 텍스트보다 키가 크다 때문이다. 사용자가 변경되면

div 
{ 
display: inline-block; 
line-height: 28px; 
} 

가 http://jsfiddle.net/X4X3U/