是一个很好的做法，使用填充而不是宽度（或高度）来建立一个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

希望这有助于。