页面图片下间隙问题

朱雀 2022-04-23 13:10 137阅读 0赞

解决图片下间隙问题：图片默认就是文字，以基线对齐（英语四线格第三线），基线和底线(四线格第四线)的距离就是下间隙，间隙一般为3px

/\*解决下间隙问题 \*/  
/\*1: 设置父元素字体大小为0\*/  
/\*font-size: 0;\*/

/\*2: 行高为0 line-height: 0\*/  
/\* line-height: 0;\*/  
/\*H 水平 v 垂直\*/

/\*3: 设置垂直对齐方式 vertical-align: 为 顶 top 底 bottom 中 midlle  
4: display:block

\*/

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$美少女战士$</title>
        <style>
           /*
            下间隙原因 ： 文字默认以基线(四线拼音格第三条)对齐  图片本质就是文字  以基线对齐的  基线到底线（四线拼音格第四条）的距离就形成了间隙
            下间隙默认一般3px   不切合实际  ？  因为有时候父元素是有有效字体
           */
            div {
                border: 1px solid #666;
     
                /*解决下间隙问题 */
                /*1: 设置父元素字体大小为0*/
                /*font-size: 0;*/
     
                /*2: 行高为0  line-height: 0*/
              /*  line-height: 0;*/
                /*H 水平 v  垂直*/
     
                /*3:  设置垂直对齐方式  vertical-align: 为 顶 top  底 bottom  中 midlle
                4:  display:block
                */
     
     
                /*文字对齐方式 -》 垂直对齐方式  vertical-align: baseline   基线 */
            }
            img {
                vertical-align: baseline;  /*基线对齐---》破坏掉  -》顶  中  底*/
                /*vertical-align:bottom;*/
     
     
                /*display: block;*/
            }
        </style>
    </head>
    <body>
    <div>
     
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550920379676&di=5a1e0e0721a3c83324e86af3a2878697&imgtype=0&src=http%3A%2F%2Fwww.hinews.cn%2Fpic%2F0%2F13%2F87%2F24%2F13872402_592137.jpg" alt="">
        ggggffffaaaa
     
    </div>
    </body>
    </html>