图像周围的空白？答案

【问题标题】：White space around image?图像周围的空白？
【发布时间】：2017-02-07 03:32:33
【问题描述】：

我正在尝试使用引导程序显示图像，但是图像两侧出现空白。这是它的样子：

这里是 Html 代码：

    <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,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 
}

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

【问题讨论】：

.img { display: block; } 到 .img { display: inline-block; }。您也可以将边框放在图像本身上。
@pol 谢谢你的作品完美，如果你不介意我问这两者有什么区别？
block 使元素覆盖 1 行，本质上是推动一切。 inline-block 基本上充当inline。阅读有关display 属性here 的更多信息。

标签： html css asp.net twitter-bootstrap

【解决方案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;
}

【讨论】：