aihbk

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
HTML---缝隙详解(一)

一、问题

　　在我们写代码的时候应该都遇到过这类问题，就是将div设置为 inline-block 时，会莫名其妙的多一个空隙！先上图：

　　

 

二、原因

　　这个问题的跟在html中打空格是一样的，在html中打多个空格只会生效一个。我们写代码的时候会有换行缩进，如图：

　　

 

三、解决方案

 　　1、去掉空隙，如：

　　　　

 

　　2、注释，如：

　　　　

 

 　　3、将结尾标签最后括号放在第二个标签前面，如：

　　　　

 

 　　4、修改代码，将父元素的font-size这是为0，子元素重新给定字体大小，如：

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 0;
        }
        .test {
            width: 100px;
            height: 100px;
            border: 1px solid;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="test">1</div>
    <div class="test">2</div>
    <div class="test">3</div>
</body>
</html>　　 

　　觉得还行的小伙伴记得点个赞，加个关注吧！

 

posted on 2022-05-04 17:01  --小白菜--  阅读(37)  评论(0)    收藏  举报