Stel ruimte in tussen divs

Ik heb twee divs zoals deze:

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

En hier is mijn css:

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

Ik wil dat de ruimte tussen de div’s 40px is. Ik heb geprobeerd opvulling, marge en breedte in mijn CSS toe te voegen, maar ik denk dat de opvulling niet is ingesteld op 40px. Hoe het te doen?


Antwoord 1, autoriteit 100%

Laat ze beide op dezelfde manier zweven en voeg de marge van 40px toe. Als je 2 elementen hebt die tegenover elkaar drijven, heb je veel minder controle en het bevattende element bepaalt hoe ver ze van elkaar verwijderd zijn.

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

Antwoord 2, autoriteit 97%

Voor mensen die op zoek zijn naar een oplossing om de afstand tussen Ndivs in te stellen, is hier een andere benadering die pseudo-selectors gebruikt:

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

Je kunt ook onderliggende pseudo-selectors combineren:

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

Antwoord 3, autoriteit 6%

U hebt een goot nodig tussen twee div goot die als volgt kan worden gemaakt

marge (goot) = breedte – gootmaat
Bijvoorbeeld marge = calc(70% – 2em)

<body bgcolor="gray">
<section id="main">
        <div id="left">
            Something here     
        </div>
        <div id="right">
                Someone there
        </div>
</section>
</body>
<style>
body{
    font-size: 10px;
}
#main div{
    float: left;
    background-color:#ffffff;
    width: calc(50% - 1.5em);
    margin-left: 1.5em;
}
</style>

Antwoord 4, autoriteit 3%

Een andere oplossing voor spatiëring tussen N div’s kan zijn:

div + div {
  margin-left: 40px;
}

We maken gebruik van +css selector. Het selecteert alleen de <div>-elementen die direct na <div>-elementen worden geplaatst.

Opmerking: we stellen hier margin-leftin en niet margin-right.

Other episodes