Добавление полей между divs

Question

Я хочу создать большие кнопки стиля в центре страницы и по большей части работает. Единственное, что я хочу, чтобы между ними было какое-то пространство, и я просто не могу заставить его работать. Ниже мой CSS. То, что я сделал, это создать 1 div под названием Wrapper, а затем создать еще 2 div внутри, один из которых называется topleft, другой - topright. На этом этапе есть только те 2 divs, но (и причина, по которой внутренние divs называются вершинами), я могу захотеть добавить дополнительные div на одной строке или, возможно, на следующую строку позже.

Я продолжал читать, что край - это способ сделать это, но он не будет работать с моим существующим кодом. Это потому, что я уже использую его в WRAPPER, чтобы сосредоточить их? У меня возникли проблемы с тем, чтобы он согласовывался так, как я хотел, и он выглядит так, как я хотел, но я подозреваю, что проблема связана с тем, что, может быть, я сосредоточен и выровнял их неправильно, если это имеет смысл?

В принципе, мой вопрос в том, как я могу получить некоторое пространство между topleft и 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 он будет центрировать содержимое по вертикали. И, плавая в divs, я думаю, немного лучше, чем устанавливать их отображение в table-cell. Вам также необходимо уменьшить ширину при настройке поля для учета пикселей полей с обеих сторон.

Answer 2

ваш "обертка" ДИВ является 600px, и каждый внутренний DIV является 300px. Это не оставляет места для какого-либо пространства?