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

解决方案

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

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

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

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

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

这篇关于css - html盒子问题，内容撑起盒子高度，却导致了盒子最下面空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！