は、私は、増加したサイズを、私が試してみましたが、それは私は1つの要素の境界線を増やすときのように動作していない<a href="https://i.stack.imgur.com/bgjBK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bgjBK.jpg" alt="enter image description here"></a></p> <p>応答レイアウトの画像のようにこれが欲しいと同じ他の列の境界線の幅

Question

その後、大きな幅次のイメージに影響を与え、グリッドレイアウトは設計通りではありません。

.list_item{ 
 
    margin: 0px 0px; 
 
    padding: 0px 0px; 
 
    list-style: none; 
 
} 
 

 
.list_item li{ 
 
    margin-bottom: 10px; 
 
    padding-left: 14px; 
 
    padding-right: 14px; 
 
} 
 

 
.list_item li{ 
 
    float: left; 
 
    margin-bottom: 20px; 
 
    margin-top: 7px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    width: 33.3333%; 
 
} 
 
.list_item > li img { 
 
height: 137px; 
 
width: 259px; 
 
} 
 
.list_item li:hover .list_img{ 
 
    border: 5px solid red; 
 
    height: 147px; 
 
    width: 269px; 
 
} 
 

 
.list_item > li .list_img{ 
 
    border: 3px solid red; 
 
    height: 143px; 
 
    width: 265px; 
 
background:blue; 
 
}

<ul class="list_item"> 
 
    <li> 
 
    <div class="list_img"> 
 
     <img src="images/1.jpg"> 
 
    </div> 
 
    </li> 
 
    <li class="list_select"> 
 
    <div class="list_img"> 
 
     <img src="images/2.jpg"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="list_img"> 
 
     <img src="images/2.jpg"> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

境界線を持っていますが、彼らの width、それに追加されていない

http://www.paulirish.com/2012/box-sizing-border-box-ftw/（旧しかし金）の一部としてそれを計算する場合があります要素の

使用box-sizing: border-box;

.list_item > li .list_img { 
    box-sizing: border-box; 
    border: 3px solid #707070; 
    height: 143px; 
    width: 265px; 
}