在div之间添加边距

Question

我想在页面中心创建大型按钮样式div，并且大多数情况下它正在工作。唯一的问题是我需要在它们之间留出一些空间，我似乎无法让它工作。以下是我的CSS。我所做的是创建一个名为Wrapper的div，然后在里面创建另外两个div，一个叫做topleft，另一个是topright。在这个阶段，只有那些2个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> 

Answer 1

看看这个的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要好一些。您还需要在设置边距时考虑边缘像素减少宽度

Answer 2

你的 “包装” 格为600像素，并且每个内部格为300像素。这不会留下任何空间吗？