イメージの周りの空白？

Question

私はイメージを表示しようとしていますが、ブートストラップを使ってイメージの両側に空白ができます。これは、次のようになります。

<div class="container"> 
    <div class="row"> 
     @foreach (var item in Model) 
     { 
      <div class="col-sm-3"> 
       <a href="@Url.Action("Details", new { id = item.ID })"> 
       @if (item.Picture != null) 
       { 
        <div class="img"> 
         <img src="@Url.Content(item.Picture)" height="200" width="200" /> 
        </div> 
       } 
       else 
       { 
        <div class="img"> 
         <img src="~/Images/Silhouette.jpg" height="200" width="200" /> 
        </div> 
       } 
       </a> <br /> 
       @Html.ActionLink(item.Name, "Details", new { id = item.ID }) 
      </div> 
     } 
    </div> 
</div> 

とCSS：

そしてここでは、HTMLコードで

html,body 
{ 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
overflow-x: hidden; 
} 

.img { 
border:1px solid black; 
display: block; 
} 

Answer 1

ではなくimgタグにボーダーを入れてみてください。

CSS：

html,body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    overflow-x: hidden; 
} 

.img, .img img { 
    display: block; 
} 

.img img{ 
    border:1px solid black; 
}