요소가 떠있는 경우에만 CSS 패딩이 올바르게 표시됩니다.

Question

버튼이 올바르게 표시되지 않는 문제가 있습니다. 요소가 왼쪽 또는 오른쪽으로 유동 될 때 버튼이 잘 표시되지만 부 풀림이 적용되지 않으면 버튼이 올바르게 표시되지 않습니다. .

내가 입증하기 위해 다음 예제를 준비했습니다 : http://codepen.io/anon/pen/xHvyt

다음과 같이 내 HTML과 CSS는 다음과 같습니다

<div class="section"> 
    <div class="textbox"> 
     <div class="text"> 
      <h1>Woop, title</h1> 
      <p>content content content</p> 
     </div> 
     <div class="buttons"> 
      <a href="#" id="wtf" class="button left"><span>Find out more</span></a> 
    <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"> 
      <a href="#" id="wtf" class="button middle"><span>Find out more</span></a> 
    <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"> 
      <a href="#" id="wtf" class="button right"><span>Find out more</span></a> 
    <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; 
} 

당신이있다 볼 수 있듯이 세 구역. 버튼이 왼쪽/오른쪽으로 떠있는 각 요소에서 제대로 표시되지만, 아무런 부울도 적용되지 않은 경우 스팬이 표시되지 않는 것과 거의 같습니다 : 블록;

미리 도움을 청하십시오.

Answer 1

"display : block"에서 "display : inline-block"으로 변경하면 플로트에 대한 걱정없이 문제를 해결하는 것으로 보입니다.

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