使鏈接按鈕之間的空間CSS

Question

沒有人知道我可以在按鈕之間放置一些空間（按鈕作爲鏈接）？我真的不能在任何地方找到答案....

CSS代碼：

.btn { 
-webkit-border-radius: 0; 
-moz-border-radius: 0; 
border-radius: 0px; 
-webkit-box-shadow: 6px 1px 18px #666666; 
-moz-box-shadow: 6px 1px 18px #666666; 
box-shadow: 6px 1px 18px #666666; 
font-family: Arial; 
color: #ffffff; 
font-size: 14px; 
background: #447494; 
padding: 6px 25px 6px 10px; 
text-decoration: none; 


.btn:hover { 
background: #079ce6; 
text-decoration: none; 

}

I want some space beteen the buttons

Answer 1

.btn { 
    margin-top: 30px; 
} 

使用保證金元素邊界之間給予的空間。

Answer 2

以下內容包含了可供玩家使用的示例代碼片段。

它應該基本上取決於你的標記是如何構造的。在下面的示例一個新class添加到亮點的情況，但你可以刪除這個類和屬性添加到.btn：

.btn { 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    border-radius: 0px; 
 
    -webkit-box-shadow: 6px 1px 18px #666666; 
 
    -moz-box-shadow: 6px 1px 18px #666666; 
 
    box-shadow: 6px 1px 18px #666666; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
    background: #447494; 
 
    padding: 6px 25px 6px 10px; 
 
    text-decoration: none; 
 
} 
 
.btn:hover { 
 
    background: #079ce6; 
 
    text-decoration: none; 
 
} 
 
.btn-space { 
 
    margin: 10px 0; 
 
}

<div class="btn">Button 1</div> 
 
<div class="btn btn-space">Button 2 - give me some space!</div> 
 
<div class="btn">Button 3</div> 
 
<div class="btn">Button 4</div> 
 
<div class="btn">Button 5</div> 
 
<div class="btn">Button 5</div> 
 
<div class="btn">Button 6</div> 
 
<div class="btn">Button 7</div> 
 
<div class="btn">Button 8</div> 
 
<div class="btn">Button 9</div> 
 
<div class="btn">Button 10</div>

---

編輯到問題更新：按鈕充當鏈接

根據需要使用顯示屬性，如 - display: block;或display:inline-block。

樣品與anchor標籤：

.btn { 
 
    display: block; 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    border-radius: 0px; 
 
    -webkit-box-shadow: 6px 1px 18px #666666; 
 
    -moz-box-shadow: 6px 1px 18px #666666; 
 
    box-shadow: 6px 1px 18px #666666; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
    background: #447494; 
 
    padding: 6px 25px 6px 10px; 
 
    text-decoration: none; 
 
} 
 
.btn:hover { 
 
    background: #079ce6; 
 
    text-decoration: none; 
 
} 
 
.btn-space { 
 
    margin: 10px 0; 
 
}

<a class="btn">Button 1</a> 
 
<a class="btn btn-space">Button 2 - give me some space!</a> 
 
<a class="btn">Button 3</a> 
 
<a class="btn">Button 4</a> 
 
<a class="btn">Button 5</a> 
 
<a class="btn">Button 5</a> 
 
<a class="btn">Button 6</a> 
 
<a class="btn">Button 7</a> 
 
<a class="btn">Button 8</a> 
 
<a class="btn">Button 9</a> 
 
<a class="btn">Button 10</a>