Is a good practice use padding instead of width (or height) to build a div?

Question

I have the next css

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

And i have this simple html

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

I'm looking for create in only one div, a white box that if you mouse over, this is expanded to the right to display a text smoothly.

And that is the question:

Is a good practice replace padding with width/height in these cases? Or is it better put the text in a different div and use the corresponding width and height instead of padding?

I don't know if i explain me good

Answer 1

It is normally better to use padding since the button will support different text lengths and let the padding control the width and height depending on the text within the button, However if you want your buttons to be one size and one size only for example: A button with Submit, and a button with Download will be 2 different sizes and if you are displaying these along side each other you may want them to be the same size as one another, in this case then a width, height set because more ideal.

I personally prefer padding but again if you want all buttons the same size then manually set these.

By the way the way you shouldn't need to use height:18px, or Width:0; Just delete these values and set the padding to control these and use a span within the button.

Example:

<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;}

Here's something I made 5mins ago to show you: JsFiddle

Hope this helps.