이미지 주위에 공백이 있습니까?

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; 
}