显示/隐藏边距/填充碰撞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凸起？

查看的jsfiddle http://jsfiddle.net/nTJZN/1/

Answer 1

例如见here。

我在做什么，而不是show()和hide()我正在改变visibility属性。

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

Answer 2

这是因为你的输入框比文本，从而导致线所示的输入框时长高。通过检查元件，我所确定的线是28px高，当输入框是可见的，所以施加28px的行高修复该问题，像这样：

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

参见http://jsfiddle.net/X4X3U/