父 div 和其中的图像之间存在不必要的空间

Question

父 div 和其中的图像之间存在不必要的空间

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我编写了上面显示的代码，但是在检查浏览器时，图像和父 div() 之间有 4px 的空间，称为 box

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

Answer 1

Mag*_*son 5

img 是一个内联元素。要删除多余的空间，可以将其设为块元素，或者将其垂直对齐而不是基线。

归档时间：	11 年，6 月前
查看次数：	1404 次
最近记录：	7 年，7 月前