使用内边距而不是宽度（或高度）来构建 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

通常最好使用填充，因为按钮将支持不同的文本长度，并让填充根据按钮内的文本控制宽度和高度，但是，如果您希望按钮只有一种尺寸和一种尺寸，例如：A提交按钮和下载按钮将有两种不同的尺寸，如果您将它们并排显示，您可能希望它们彼此尺寸相同，在这种情况下，设置宽度和高度，因为更理想。

我个人更喜欢填充，但如果您希望所有按钮具有相同的大小，请手动设置它们。

顺便说一下，你不需要使用 height:18px 或 Width: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

希望这可以帮助。