图片的下间隙问题

出现下间隙的原因:

文字默认以基线对齐
图片本质就是文字
基线到底线的距离就形成间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
       
            border: 1px solid #666;
        }
    </style>
</head>
<body>
<div>

    <img src="../day01/img/timg%20(1).jpg" alt="">

</div>
</body>
</html>

图片的下间隙问题

解决方法:

1、font-size: 0;

2、line-height: 0;

3、改变对齐方式

img{
    /*默认是跟基线对齐*/
    /*vertical-align: top;*/
    /*vertical-align: bottom;*/
    /*vertical-align: middle;*/
}

4、块状化 - 无基线对齐

display:block

图片的下间隙问题

图片的下间隙问题

出现下间隙的原因:

解决方法:

相关推荐