块级标签包含行内标签底部出现3px间隔的解决办法
程序员文章站
2022-05-27 14:21:58
...
当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔;
代码如下:
doctype html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
#box{
background: red;
}
style>
head>
body>
div id='box'>
img src="test.png">
div>
body>
html>
显示效果如下:
解决办法有三种:
1.设置div{ font-size: 0};将外层块级标签的font-size设置为0;
2.设置img{ display: block};将内层行内标签的display设置为block,将其变为块级标签;
3.设置img{ vertical-align:top;};将内层行内标签的vertical-align设置为top;
上一篇: openssl使用DSA算法生成签名