父div和图像内部之间没有必要的空间

Question

HTML代码

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>


<title>abc</title>

</head>
<body>
<div class="wrapper">

    <div class="box"><img src="images/roundlogo.jpg" alt=""></div>
</div>

</body>
</html>

css代码

img{
border:0px;
border-image-width:0px;
border-image-slice:0px;

}
.box
{
width:250px;
//border:1px solid;
height:auto;
border-image-slice:0px;
border-image-width:0px;
border-image-outset:0px;
}

.box img
{
width:100%;
//border:1px solid green;
margin-top:0px;
}

我写上面显示的代码，但在检查浏览器时，图像和父div（）之间有4px空间称为框

这是我在jsfiddle的工作http://jsfiddle.net/2RqmU/547/你可以检查iframe，结果显示这显示空间清楚http://jsfiddle.net/2RqmU/548/

Answer 1

img是一个内联元素。 要删除额外的空间要么使其成为块元素，要么使其为基线以外的垂直对齐。

Answer 2

只是block该图像。

img{ display:block; }

div认为image是inline element 。 所以它不考虑图像的高度来设置它的高度（例如：默认情况下，文本是内联元素。文本的父元素，从不具有与文本高度相同的高度）。

这些东西对我也有用。

display: inherit (or) grid (or) table-caption (or) list-item;

(or)

vertical-align: bottom;