box-sizing border-box не работает для верхней и нижней границы

Question

Я учусь создать отзывчивый сайт для себя. У меня проблема с коробкой-размерной рамкой в ​​верхней и нижней границах одного из моих изображений. У меня есть два столбца изображений с разной высотой, я хочу, чтобы края совпадали, но я также хочу, чтобы несколько пикселей белого пространства отделяли каждое изображение.

Моя проблема заключается в том, что при использовании рамки с размерами в верхней и нижней границах они остаются вне края изображения, таким образом, нажатие следующего изображения ниже вниз на несколько пикселей, что делает его больше не совпадением соседа на нижний край.

Я хочу исправить эту проблему перед тем, как идти вперед и добавить границы на другие изображения. Я новичок в CSS, поэтому, возможно, есть что-то очень очевидное, я ошибался?

Любая помощь, чтобы получить границы, чтобы остаться на внутреннем краю изображений, будет с благодарностью!

Я прикрепил экран к тому, что происходит. 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

Я не думаю, что нужны ваши стили .innerBorder. Попробуйте следующее:

#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>