Установить пространство между divs

У меня есть два divs:

<section id="main">
        <div id="left">
            <asp:ContentPlaceHolder ID="left" runat="server" />
        </div>
        <div id="right">
            <asp:ContentPlaceHolder ID="right" runat="server" />
        </div>
</section>

И вот мой css:

#left
{
    float: left;
    margin-right: 17px;

}

#right
{
    float: right;
}

Я хочу, чтобы пространство между divs было равным 40px. Я попробовал добавить padding, margin и width в моем css, но я думаю, что он не установил дополнение для исправления 40px. Как это сделать?

Ответ 1

Поплавьте их одинаково и добавьте границу 40px. Если у вас есть 2 элемента, плавающие напротив, у вас будет гораздо меньше контроля, а содержащий элемент определит, насколько они находятся далеко друг от друга.

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}

Ответ 2

Для людей, ищущих решение для установки интервала между N divs, вот еще один подход с использованием псевдоселекторов:

div:not(:last-child) {
  margin-right: 40px;
}

Вы также можете комбинировать дочерние псевдоселектора:

div:not(:first-child):not(:last-child) {
  margin-left: 20px;
  margin-right: 20px;
}