图片和文字对齐以及图片下间隙/前端四

<style>
        img{
            width: 40px;
            height: 40px;
            vertical-align: middle;/*调整图片和文字中线对齐*/
        }
    </style>
</head>

<body>

<!--图片对齐和图片下间隙  vertical-align  middle/中线 top bottome baseline/顶线 底线 基线-->
<!--h 水平   v  垂直-->
<img src="2.jpg" alt="">图片对齐和图片下间隙 解决

</body>

如下图：

图片和文字对齐以及图片下间隙/前端四

图片下间隙问题：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid black;
            line-height: 0px;/*第二种解决方案  图片本质是文字 行高为0 */
            font-size: 0px;/*第三种解决方案（慎用，要看有没有文字在）   图片大小设置为0*/
        }
        /* 第一种解决方案（优选解决方案）  调整图片对齐方式*/
        /*img {*/
            /*vertical-align: top;*/
        /*}*/

    </style>
</head>
<body>
<div>
    asdas
<img src="2.jpg" alt="">
</div>

图片和文字对齐以及图片下间隙/前端四