顯示/隱藏邊距/填充碰撞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/