元素上边距似乎没有变化

Question

我有一些文字，下面有一个按钮。无论我更改顶部边距，该按钮仍然保留在文本的底部。

我正在尝试在文本和按钮之间留下一个小间隙。

这里是一个的jsfiddle：http://jsfiddle.net/24bk2t78/

@import url(http://fonts.googleapis.com/css?family=Nunito:300); 
 

 

 
.homethree a { text-decoration: none; } 
 
sup { font-size: 36px; font-weight: 100; line-height: 55px; } 
 

 
.button 
 
{ 
 
\t margin-top:30%!important; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 2px; 
 
\t text-align: center; 
 
\t color: #0C5; 
 
\t font-size: 24px; 
 
\t font-family: "Nunito", sans-serif; 
 
\t font-weight: 300; 
 
\t position:relative; 
 
\t padding: 20px 0; 
 
\t width: 220px; 
 
\t height:30px; 
 
\t background: #0D6; 
 
\t border: 1px solid #0D6; 
 
\t color: #FFF; 
 
\t overflow: hidden; 
 
\t transition: all 0.5s; 
 
} 
 

 
.button:hover, .button:active 
 
{ 
 
    text-decoration: none; 
 
    color: #0C5; 
 
    border-color: #0C5; 
 
    background: #FFF; 
 
} 
 

 
.button span 
 
{ 
 
    
 
    padding-right: 0; 
 
    
 
    transition: padding-right 0.5s; 
 
} 
 

 
.button span:after 
 
{ 
 
    content: ' '; 
 
    
 
    right: -18px; 
 
    opacity: 0; 
 
    width: 10px; 
 
    height: 10px; 
 
    
 

 
    background: rgba(0, 0, 0, 0); 
 
    border: 3px solid #FFF; 
 
    border-top: none; 
 
    border-right: none; 
 

 
    transition: opacity 0.5s, top 0.5s, right 0.5s; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.button:hover span, .button:active span 
 
{ 
 
    padding-right: 30px; 
 
} 
 

 
.button:hover span:after, .button:active span:after 
 
{ 
 
    transition: opacity 0.5s, top 0.5s, right 0.5s; 
 
    opacity: 1; 
 
    border-color: #0C5; 
 
    right: 0; 
 
    top: 50%; 
 
}

<div class="row text-center homethree"> 
 
    <div class="col-md-4"> 
 
     <h4 class="service-heading">A Range of Classes</h4> 
 
     <p class="text-muted">WE TEACH CHILDRENS CLASSES, FAMILY GROUPS & ADULTS.</p> 
 
\t  <a href="#" class="button"><span>page 1</span></a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <h4 class="service-heading">Passionate Instructors</h4> 
 
     <p class="text-muted">ALL OUR CLASSES ARE TAUGHT BY PASSIONATE, MOTIVATIONAL & INSPIRING INSTRUCTORS.</p> 
 
     <a href="#" class="button"><span>page 2</span></a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <h4 class="service-heading">Friendly Team</h4> 
 
     <p class="text-muted">NEW MEMBERS ARE ALWAYS WELCOME. TWO FREE LESSONS FOR ALL.</p> 
 
\t \t <a href="#" class="button"><span>page 3</span></a> 
 
    </div> 
 
</div>

Answer 1

的问题是，<a>标签inline元素。将它们更改为inline-block或block样式元素将使您的边距正确应用。

.button { 
    display: inline-block; 
} 

更多信息：The Difference Between “Block” and “Inline”

在一个旁注，为什么不使用<button>标签，而不是<a>？他们会更合适。

Answer 2

试试这个演示 Fiddle

.button{ 
    float:left; 
    margin-top:0; 
    } 
.col-md-4 
{ 
    float:left; 
    width:100% 
}