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/

===============>>#1 票数:3 已采纳

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

===============>>#2 票数:0

只是block该图像。

img{ display:block; }

div认为imageinline element 所以它不考虑图像的高度来设置它的高度(例如:默认情况下,文本是内联元素。文本的父元素,从不具有与文本高度相同的高度)。

这些东西对我也有用。

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

(or)

vertical-align: bottom;

  ask by Susantha7 translate from so

未解决问题?本站智能推荐: