是一個很好的做法，使用填充而不是寬度（或高度）來建立一個div？

Question

我的下一個CSS

.button { 
width:0; 
height:18px; 
padding: 8px 0px 2px 30px; 
overflow:hidden; 
transition: padding .5s ease; 
} 
.button:hover { 
padding: 8px 170px 2px 35px 
} 

，我有這個簡單的HTML

<div class="button"> A text </div> 

我在找創建僅在一個DIV，一個白框，如果您將鼠標懸停，這是擴大在右側順利顯示文字。

而且這是個問題：

是一個很好的做法替換寬度/高度填充在這些情況下？ 或者更好地把文本放在不同的div中，並使用相應的寬度和高度而不是填充？

我不知道如果我解釋我好

Answer 1

它通常是更好地使用填充，因爲該按鈕會支持不同的文本長度，讓取決於按鈕中的文本的寬度和高度填充控制但是，如果你想讓你的按鈕只有一個尺寸和一個尺寸，例如：一個提交按鈕和一個下載按鈕將有兩種不同的尺寸，如果你一邊顯示這些按鈕，你可能希望他們是相同的尺寸，在這種情況下，然後設置一個寬度，高度，因爲更理想。

我個人比較喜歡padding，但是如果你想讓所有的按鈕尺寸相同，然後再手動設置，順便說一下，你不需要使用高度：18px或寬度：0;只需刪除這些值並設置填充以控制這些值，並在按鈕內使用一個範圍。

例子：

<p>Simple - One Button</p> 
<div class="button"><span>A Button</span></div> 

<p>3 Simple Buttons with Float Elements</p> 
<div class="button floatleft"><span>A Button</span></div> 
<div class="button floatleft"><span>A Button</span></div> 
<div class="button floatleft"><span>A Button</span></div> 
<div class="clearfix"> </div> 

p {padding:15px 5px;} 
.button {position:relative;transition:padding .5s ease;padding:5px;} 
.button.floatleft {float:left;} 
.button span:hover {padding:5px 20px 5px;} 
.button span {background:#ccc;padding:5px;color:white;} 
.clearfix {clear:both;} 

這裏的東西我5分鐘前做給你看：JsFiddle

希望這有助於。