img的底部空白

最新推荐文章于 2023-06-22 09:10:46 发布

Airfald

最新推荐文章于 2023-06-22 09:10:46 发布

阅读量918

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Airfald/article/details/56834876

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

img的底部空白部分

近日在学习慕课网的一个小项目的时候一个细节引起了我的注意，具体如下：

上面白色左边的div的width:200px;height为自适应只放一张图片，图片大小为width:200px,height：80px;可是图片竟然溢出了，通过查看元素发现左边div的高度为83.5px;

竟然比图片还大3.5px,可是我明明只放了一张图片了啊！而且margin，padding也都初始化为0了！这不科学？

总结了一下问题：此问题div高度高度不能自适应的问题！

效果图如下：

红色部分为溢出部分，既然知道是溢出的问题了那么可以解决了，既然是溢出那么就好办了，直接overflow：hidden

不就可以了吗！是的加上overflow：hidden问题的确解决了!

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enterprise website</title>
    <link rel="stylesheet" href="style/main.css" type="text/css" />
    <script type="text/css" src="js/setHomeSetFav.js"></script>
</head>
<body>
<div class="top">
    <div class="top-content">
        <ul>
            <li><a href="#">联系我们</a></li>
            <li><a href="#" οnclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
            <li><a href="#" οnclick="SetHome(window.location)">设为首页</a></li>    <!-- 因为右浮动所以把最后显示的放在最前面 -->
        </ul>
    </div><!-- top结束 -->
</div>


    <div class="wrap">
        <div class="logo">
            <div class="logo-left">
                <img src="images/logo.jpg" alt="慕课网logo" />
            </div>
            <div class="logo-right">
                <img src="images/tel.jpg" alt="服务热线" />24小时服务热线：<span class="tel">0123-456-789</span>
            </div>
        </div><!-- logo结束 -->

        <div class="nav">
            <div class="nav-left"></div>
            <div class="nav-mid">
                <div class="nav-left-mid">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">关于慕课</a></li>
                        <li><a href="#">新闻动态</a></li>
                        <li><a href="#">课程中心</a></li>
                        <li><a href="#">在线课程</a></li>
                        <li><a href="#">人才招聘</a></li>
                    </ul>
                </div>
                <div class="nav-right-mid">
                    <form action="" method="post">
                        <input type="text" name="" id="" />
                    </form>
                </div>
            </div>
            <div class="nav-right"></div>
        </div>
    </div><!-- wrap结束 -->
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    font-size: 12px;
}
body{
    background-color: #f5f5f5;
}
.top{
    background: url("../images/top_bg.jpg") repeat-x;
    width: 100%;
    height: 27px;
}
.top-content{
    width: 1000px;
    margin: 0 auto;
}
.top-content li{
    list-style-image: url("../images/li_bg.gif");
    float: right;
    width: 70px;
    line-height: 27px;
}
.top-content a:link,.top-content a:visited{
    color: #8e8e8e;
    text-decoration: none;
}
.top-content a:hover{
    color: #900;
    text-decoration: none;
}
.wrap {
    width: 1000px;
    margin: 0 auto;
}
.logo{
    height: 80px;
    background-color: #FFF;
}
.logo-left{
    width: 200px;
    /*height: 8px;   !*解决图片的大小问题图片实际大小不是80px要略大*!*!*/
    float: left;
    background-color: #990000;
    /*line-height: 0;*/
}
.logo-left img{
    /*vertical-align: bottom;*/
}
.logo-right{
    width: 300px;
    float: right;
    height: 28px;
    margin-top: 30px;
    color: #8e8e8e;
}
.logo-right img{
    vertical-align: middle;
    margin-right: 10px;
}
.tel{
    font-family: "Microsoft YaHei UI";
    font-size: 16px;
    color: #C00;
}
.nav-left{
    background-color: aqua;
    float: left;
}

那么问题来了一张图片为什么会变大呢？

我做了如下实验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
        font-size: 14px;
    }
        div.test{
            background-color: red;
            width: 330px;
            height: 60px;
        }
        img{
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="test"><img src="images/logo.gif" alt=""></div>
</body>
</html>

图片溢出了（红色部分）；

--------------------------------------------------------------------------------------------------------------------------------------------------

作者：尤雨溪
链接：https://www.zhihu.com/question/21558138/answer/18615056
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念：

可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。

对比一下 vertical-align 的另外两个常见值，top 和 bottom:

可以看到，baseline 和 bottom 之间有一定的距离。实际上，inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字，只要是 inline 的图片这段空白都会存在。

到这里就比较明显了，要去掉这段空白，最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话，那应该是用 bottom 或是 middle 比较好。

另外，top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

由于调整图片容器的字体也可以：

.box {font-size:0;}

所以考虑是基线引起的问题，图片底部是基于文字基线的，而容器 div 的底部是低于基线的。所以这个空白实际上是文字基线以下的部分。

同样的道理，无论 img 设置 display:block 还是 vertical-align:top/bottom/middle 都将使 img 超出文字基线，致使空白消失。

所以综上所述：解决办法为
要么父元素有一个明确的height值。否则：
1.设置vertical为其它值：如果在同一行里有文字混排的话，那应该是用 bottom 或是 middle 比较好。
2.font-size:0:当然，这样做的后果就是不能图文混排了。
3.top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0