html+css 图片/文字与外层外边框底部间隙bug

最新推荐文章于 2023-07-28 16:47:43 发布

cc超人不会飞

最新推荐文章于 2023-07-28 16:47:43 发布

阅读量758

点赞数

分类专栏：前端文章标签： html5 css3 css

本文链接：https://blog.csdn.net/v587ge/article/details/106496047

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    bug问题：外层div的border线条底部与图片底部出现有几像素的缝隙，
    出现bug的原因：vertical-align: baseline;垂直居中的属性默认是底部对齐，而图片/文字的有顶线、中线、基线、底线四条线构成，基线与底线有之间还有内容，会撑开外层div
    <div style="border: 1px solid black;margin-bottom: 20px;">
        <img src="banner.jpg" style="width: 223px; height: 100px;">   
    </div>

    解决方式1:vertical-align: top; 垂直居中属性改为其他对齐方式
    <div style="border: 1px solid black;margin-bottom: 20px;">
        <img src="banner.jpg" style="width: 223px; height: 100px;vertical-align: top;"> 
    </div>
    解决方式2：将图片、文字修改为块状元素
    <div style="border: 1px solid black;">
        <img src="banner.jpg" style="width: 223px; height: 100px;display: block;">
    </div>
</body>

</html>

效果图：

cc超人不会飞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+css 图片/文字与外层外边框底部间隙bug

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> bug问题：外层di.
复制链接

扫一扫

专栏目录