html盒子问题,内容撑起盒子高度,却导致了盒子最下面空白 财富值76

2016-10-29 17:16发布

在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;     }     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>     
友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
7条回答

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

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

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

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

See http://www.zhangxinxu.com/wor... for more details.

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

一周热门 更多>