Différentes marges avec divs

Question

J'ai trois divs placés l'un à côté de l'autre, ils ont les mêmes hauteurs et largeurs. mais pour une raison quelconque, l'un est placé plus haut que l'autre. ils sont toujours l'un à côté de l'autre, mais la marge du sommet est différente pour chacun d'entre eux.

html:

<div class="diensten"> 
    <div id="dienst1"> 
     <h2>Ontruimingsoefening</h2> 
     <p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p> 
     <img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900"> 
    </div> 

    <div id="dienst2"> 
     <h2>Beheer brandmeldinstallatie</h2> 
     <p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p> 
     <img src="Foto's/IMG_2704.JPG"> 
    </div> 

    <div id="dienst3"> 
     <h2>Camerabeveiliging</h2> 
     <p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p> 
    </div> 

css:

.diensten h2 { 
    padding-top: 40px; 
} 

.diensten p, h2 { 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    padding: 20px; 
} 

.diensten { 
    position: absolute; 
    display: inline-block; 
    height: 500px; 
    background-color: #FFFFFF; 
    margin: auto; 
} 

#dienst1 { 
    margin-left: 90px; 
    position: relative; 
    display: inline-block; 
    height: 500px; 
    width: 500px; 
    box-shadow: 0px 0px 30px 0px #000; 
} 

#dienst2 { 
    margin-left: 90px; 
    position: relative; 
    display: inline-block; 
    height: 500px; 
    width: 500px; 
    box-shadow: 0px 0px 30px 0px #000; 
} 

#dienst3 { 
    margin-left: 90px; 
    position: relative; 
    display: inline-block; 
    height: 500px; 
    width: 500px; 
    box-shadow: 0px 0px 30px 0px #000; 
} 

#dienst2 img{ 
    height: 300px; 
    width: 450px; 
} 

#dienst1 img { 
    position: relative; 
    display: block; 
    margin: auto; 
    width: 450px; 
    margin-top: 100px; 
    box-shadow: 0px 0px 20px 0px #000; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

#dienst2 img{ 
    position: relative; 
    display: block; 
    margin: auto; 
    width: 450px; 
    height: 350px; 
    margin-top: 30px; 
    box-shadow: 0px 0px 20px 0px #000; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

#dienst3 img{ 
    margin: auto; 
    height: 330px; 
    width: 450px; 
    margin-top: 50px; 
    box-shadow: 0px 0px 20px 0px #000; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

Answer 1

Celle du milieu est plus grand. Si vous souhaitez les aligner au sommet de leur parent, ajoutez vertical-align: top aux 3 divs.

.diensten h2 { 
 
    padding-top: 40px; 
 
} 
 

 
.diensten p, h2 { 
 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
 
    padding: 20px; 
 
} 
 

 
.diensten { 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 500px; 
 
    background-color: #FFFFFF; 
 
    margin: auto; 
 
} 
 

 
#dienst1 { 
 
    margin-left: 90px; 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 500px; 
 
    width: 500px; 
 
    box-shadow: 0px 0px 30px 0px #000; 
 
} 
 

 
#dienst2 { 
 
    margin-left: 90px; 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 500px; 
 
    width: 500px; 
 
    box-shadow: 0px 0px 30px 0px #000; 
 
} 
 

 
#dienst3 { 
 
    margin-left: 90px; 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 500px; 
 
    width: 500px; 
 
    box-shadow: 0px 0px 30px 0px #000; 
 
} 
 

 
#dienst2 img{ 
 
    height: 300px; 
 
    width: 450px; 
 
} 
 

 
#dienst1 img { 
 
    position: relative; 
 
    display: block; 
 
    margin: auto; 
 
    width: 450px; 
 
    margin-top: 100px; 
 
    box-shadow: 0px 0px 20px 0px #000; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
#dienst2 img{ 
 
    position: relative; 
 
    display: block; 
 
    margin: auto; 
 
    width: 450px; 
 
    height: 350px; 
 
    margin-top: 30px; 
 
    box-shadow: 0px 0px 20px 0px #000; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
#dienst3 img{ 
 
    margin: auto; 
 
    height: 330px; 
 
    width: 450px; 
 
    margin-top: 50px; 
 
    box-shadow: 0px 0px 20px 0px #000; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.diensten > div { 
 
    vertical-align: top; 
 
}

<div class="diensten"> 
 
    <div id="dienst1"> 
 
    <h2>Ontruimingsoefening</h2> 
 
    <p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast 
 
     worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p> 
 
    <img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900"> 
 
    </div> 
 

 
    <div id="dienst2"> 
 
    <h2>Beheer brandmeldinstallatie</h2> 
 
    <p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen 
 
     en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een 
 
     visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p> 
 
    <img src="Foto's/IMG_2704.JPG"> 
 
    </div> 
 

 
    <div id="dienst3"> 
 
    <h2>Camerabeveiliging</h2> 
 
    <p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn 
 
     er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. 
 
     Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p> 
 
    </div>