CSS padding only displays correctly when element is floated - html

Question

I'm having issues with a button not displaying correctly, when the element is floated left or right the button displays fine, however if no float is applied the button doesn't display correctly.
I've prepared the following example to demonstrate:
http://codepen.io/anon/pen/xHvyt
My HTML and CSS are as follows:
<div class="section">
<div class="textbox">
<div class="text">
<h1>Woop, title</h1>
<p>content content content</p>
</div>
<div class="buttons">
<span>Find out more</span>
<div class="clear"></div>
</div>
</div>
</div>
<div class="section">
<div class="textbox">
<div class="text">
<h1>Woop, title</h1>
<p>content content content</p>
</div>
<div class="buttons">
<span>Find out more</span>
<div class="clear"></div>
</div>
</div>
</div>
<div class="section">
<div class="textbox">
<div class="text">
<h1>Woop, title</h1>
<p>content content content</p>
</div>
<div class="buttons">
<span>Find out more</span>
<div class="clear"></div>
</div>
</div>
</div>
CSS:
.section .textbox
{
width:25%;
z-index:2;
padding:2.5%;
text-align: center;
background: #4a8237;
}
.section .textbox h1
{
font-weight: 800;
font-size: 275%;
margin:0;
color:#FFF;
}
.section .textbox .text p
{
margin:10% 0;
color:#FFF;
}
.section .textbox .button
{
width: 45%;
text-align: center;
background: url('http://i.imgur.com/dUYP3sP.png');
border-radius: 5px;
display: block;
color:#FFF;
white-space: nowrap;
}
.section .textbox .button.left
{
float:left;
}
.section .textbox .button.right
{
float:right;
}
.section .textbox .button.middle
{
margin:0 auto;
}
.section .textbox .button span
{
display: block;
min-height: 40px;
padding:10%;
margin-bottom:10%;
background: url('http://i.imgur.com/NvJtuDL.png') no-repeat center bottom;
}
As you can see there are three .section divs. In each the ones where the button is floated left/right it displays properly, however when no float is applied it's almost as is the span is not displaying:block;
Thanks in advance for any help.

Answer 1

Changing from "display:block" to "display:inline-block" seems to fix your problem without concerns about the floats.
.section .textbox .button span
{
display: inline-block;
min-height: 40px;
padding:10%;
margin-bottom:10%;
background: url('http://i.imgur.com/NvJtuDL.png') no-repeat center bottom;
}