Currently, I am in the process of developing my own responsive website. However, I have encountered an issue with the box-sizing border-box on the top and bottom borders of one specific image. The layout consists of two columns with images of varying heights; I aim for the edges to align while maintaining a small amount of white space between each image.
The problem arises when implementing the box-sizing border-box on the top and bottom borders, as they extend beyond the edge of the image. This causes the subsequent image below it to shift downwards slightly, disrupting the alignment along the bottom edge.
Prior to proceeding with adding borders to other images, I need to address this issue. Given my limited experience with CSS, I suspect there may be a simple mistake that I have overlooked. Any guidance on how to ensure the borders stay within the inner edge of the images would be highly appreciated!
I have included a screenshot illustrating the current situation. View 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>