处理Img照片底部空白间隙难题

日期:2020-10-14 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

近期做新项目发现引入照片时正下方总出現空白,状况以下图所示。

<style>
    .img-box {
        border: 2px solid red;
        width: 550px;
    }
</style>

<div class="img-box">
    <img src="./img.png" alt="">
</div>

后发现缘故是行内块元素会和文本的基准线对齐,要处理这个难题实际上很简易,关键方式有两种:

1. 给照片加上 vertical-align: middle | top | bottom 等。(强烈推荐应用)

img {
    vertical-align: bottom;
}

2. 把照片变换为块级元素 display: block; (变换块级元素将会会危害你的合理布局,因此强烈推荐应用第1种)

g {
    display: block;
}

好啦,难题就这么简易的处理了。
假如大伙儿有甚么更好的方式,欢迎沟通交流,评价区留言哦~

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。