html盒子问题，内容撑起盒子高度，却导致了盒子最下面空白？

在div中设置一张图片，并在css中将div宽度设置为520px，然后图片宽度=520px，按照布局来说应该是盒子高度会被内容撑起，但是结果却是在div下面有道白色空白区域，如果设置了div高度=图片高度就没问题，这是为什么呢？

下面上代码：
<style>

*{ padding:0; margin:0; } div{ /*box-sizing:border-box;*/ /*height:270px;*/ width:520px; position:relative; margin:80px auto; border:1px solid gold; } img{ width:520px;} span{ /*height:80px;*/ /*box-sizing:border-box;*/ width: 40px; display:block; line-height: 80px; text-align:center; /*padding-left: 5px;*/ font-size:50px; font-weight:bolder; color:rgb(255,255,255); background-color:rgba(0,0,0,0.4); } span:nth-of-type(1){ position:absolute; top:50%; /*left:0;*/ margin-top:-40px; } span:last-of-type{ position:absolute; top:50%; right:0; margin-top:-40px; } 优艾设计网_Photoshop百科ol{ list-style-type:none; height:30px; width:150px; /*border:1px solid red;*/ position:absolute; bottom:10px; right:10px; } ol li{ line-height:30px; width:30px; float:left; border:1px solid gold; text-align:center; background-color: rgba(255,255,255,0.7); box-sizing:border-box; } <div> <img src="img/ad.jpg" alt="ad页面"> <span>&lt;</span> <span>&gt;</span> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div>

---

jimjane 14小时前

优艾设计网_设计

可能因为图片默认是内联（行级）元素，浏览器默认的一些样式行为吧？推荐在前端开发时使用一些类似于 normalize.css 的库重置一下浏览器的样式，让所有浏览器更统一。

---

杨酒酒 优艾设计网_平面设计 14小时前

把图片的 display 设为 block 即可解决这个问题。

---

m13****99 14小时前

优艾设计网_设计百科

如果把 div 高度设为图片高度，尽管那个匿名 line box 的底部仍然在那里，但是被溢出掉了。

---

常观己 14小时前

优艾设计网_Photoshop问答

之前的回答比较草率不严谨，修改了，对不起，_CRY的答案才是正确的

---

常观己 14小时前

优艾设计网_平面设计

类似问题: https://segmentfault.com/q/10...

---

sl0321 优艾设计网_Photoshop论坛 14小时前

图片默认是行内替换元素，并且 vertical-align 为 baseline，也就是说它的底部只对齐到 div 的块盒子 (block box) 里面创建的匿名行盒子 (line box) 的 baseline, 而这个位置和整个 div 的底部，也就是由前文中的匿名 line box—它恰好是这个 div 的最后一个 line box—的底部所决定的位置，是有一定空隙的。这一空隙就是问题中白色空白区域的来源。

---