在div之間添加邊距

我想在頁面中心創建大型按鈕樣式div，並且大多數情況下它正在工作。唯一的問題是我需要在它們之間留出一些空間，我似乎無法讓它工作。以下是我的CSS。我所做的是創建一個名爲Wrapper的div，然後在裏面創建另外兩個div，一個叫做topleft，另一個是topright。在這個階段，只有那些2個div，但是（和內部div被稱爲頂部的原因）我可能想要在同一行添加額外的div，或者稍後添加額外的div。在div之間添加邊距

我一直在閱讀該保證金是實現它的方式，但它不適用於我現有的代碼。是因爲我已經在WRAPPER中使用它來讓它們居中？我有一些麻煩讓它符合我想要的方式，但它看起來確實是我想要的方式，但我懷疑我的問題是因爲如果這有意義，我可能會將它們集中並對齊它們？

基本上，我的問題是我怎樣才能得到toppleft和topright之間的一些空間？

.wrapper { 
    margin: 0 auto; 
    width:600px; 
} 
.topleft { 
    height: 200px; 
    width: 300px; 
    vertical-align: middle; 
    display: table-cell; 
    border-radius: 15px; 
    background-color: rgb(0,178,219); 
} 
.topright { 
    height: 200px; 
    width: 300px; 
    vertical-align: middle; 
    display: table-cell; 
    border-radius: 15px; 
    background-color: rgb(134,197,73); 
}

我的HTML很簡單：

<div class="wrapper"> 
    <div class="topleft"> <a href="energy.html">ENERGY</a> </div> 
    <div class="topright"> <a href="minerals.html">MINERALS</a> </div> 
</div>

來源

2012-07-31 Trido

看看這個的jsfiddle

http://jsfiddle.net/peter/YmKc4/

更新CSS

.wrapper { 
    margin: 0 auto; 
    width:600px; 
} 
.topleft { 
    height: 200px; 
    width: 280px; 
    border-radius: 15px; 
    background-color: rgb(0,178,219); 
    float:left; 
    line-height:200px; 
    margin:0 5px 0; 
} 
.topright { 
    height: 200px; 
    width: 280px; 
    border-radius: 15px; 
    background-color: rgb(134,197,73); 
    float:left; 
    line-height:200px; 
    margin:0 5px 0; 
}

當您設置line-height到相同的高度，你的DIV它會垂直居中的內容。並且將這些div留下，我認爲比將它們的顯示設置爲table-cell要好一些。您還需要在設置邊距時考慮邊緣像素減少寬度

來源

2012-07-31 23:16:52 Anagio

啊，我看到我出錯的地方。 DERP。哈哈謝謝。 – Trido 2012-07-31 23:27:27

你的「包裝」格爲600像素，並且每個內部格爲300像素。這不會留下任何空間嗎？

來源

2012-07-31 23:15:20 Xhynk

在div之間添加邊距

回答

相關問題