box-sizing border-box funktioniert nicht für oberen und unteren Rand

Question

Ich lerne, eine reaktionsschnelle Website für mich selbst zu bauen. Ich habe ein Problem mit der Box-Sizing-Rahmen-Box am oberen und unteren Rand eines meiner Bilder. Ich habe zwei Spalten mit Bildern unterschiedlicher Höhe, ich möchte, dass die Kanten übereinstimmen, aber ich möchte auch ein paar Pixel weißen Zwischenraum, um jedes Bild zu trennen.

Mein Problem ist, wenn Box-Sizing-Rahmen-Box auf der oberen und unteren Rahmen bleiben sie außerhalb des Randes des Bildes, so dass das nächste Bild unten um ein paar Pixel nach unten, so dass es nicht mehr seine Nachbarn auf der Unterkante.

Ich möchte dieses Problem beheben, bevor Sie fortfahren und Grenzen zu den anderen Bildern hinzufügen. Ich bin neu in CSS, also gibt es vielleicht etwas ganz Offensichtliches, dass ich falsch liege?

Irgendwelche Hilfe, um die Grenzen zu erhalten, um an der inneren Kante der Bilder zu bleiben, würde sehr geschätzt werden!

Ich habe einen Screenshot von was passiert ist angeschlossen. border-box problem

#rightCol { 
 
    width: 50%; 
 
    height: auto; 
 
    float: right; 
 
    box-sizing: border-box; 
 
    border-left: 2px solid white; 
 
} 
 
#rightCol img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
#leftCol { 
 
    width: 50%; 
 
    height: auto; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    border-right: 2px solid white; 
 
} 
 
#leftCol img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
.innerBorder { 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    border-top: 4px solid white; 
 
    border-bottom: 4px solid white; 
 
}

<div id="rightCol"> 
 
    <div> 
 
    <img src="./images/pa.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img src="./images/game.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img src="./images/spine.jpg" /> 
 
    </div> 
 
</div> 
 

 

 
<div id="leftCol"> 
 
    <div> 
 
    <img src="./images/truck.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img class="innerBorder" src="./images/ccc.jpg" /> 
 
    </div> 
 
    <div> 
 
    <img src="./images/box.jpg" /> 
 
    </div> 
 
</div>

Answer 1

Ich glaube nicht, Ihre .innerBorder Arten benötigt werden. Versuchen Sie dies:

#rightCol { 
    float: left; 
    box-sizing: border-box; 
    border-left: 2px solid white; 
} 
#rightCol img { 
    max-width: 100%; 
    height: auto; 

} 
#leftCol { 
    float: left; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border-right: 2px solid white; 
} 
#leftCol img { 
    max-width: 100%; 
    height: auto; 

} 


<div id="leftCol"> 
    <div> 
    <img src="./images/truck.jpg" /> 
    </div> 
    <div> 
    <img src="./images/ccc.jpg" /> 
    </div> 
    <div> 
    <img src="./images/box.jpg" /> 
    </div> 
</div> 


<div id="rightCol"> 
    <div> 
    <img src="./images/pa.jpg" /> 
    </div> 
    <div> 
    <img src="./images/game.jpg" /> 
    </div> 
    <div> 
    <img src="./images/spine.jpg" /> 
    </div> 
</div>