去除元素间距的解决方法

最新推荐文章于 2022-10-21 10:05:02 发布

温凉皆可

最新推荐文章于 2022-10-21 10:05:02 发布

阅读量795

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_38844939/article/details/75330182

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 <style type="text/css">
        .frame{
            width: 300px;
            height: 300px;
            background-color: #71b9f1;


        }
        .left{
            width: 100px;
            height: 100px;
            background: red;
            display: inline-block;
            word-spacing: -6px;


        }
        .right{
            width: 100px;
            height: 100px;
            background-color: #ffbc00;
            display: inline-block;
            word-spacing: -6px;

        }
    </style>
</head>
<body>
<div class="frame">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

显示结果：

我们可以看到，两个元素之间有着非常明显的间隙，这应该是我们写代码的过程中遇到的问题中算是很常见的问题，那么我们应该怎么去解决呢？

方法一：去掉标签段之间的空格

<div class="frame">
    <div class="left">左</div><div class="right">右</div>   
</div>
方法二：使用margin负值
 
.left{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
    margin-right: -10px;
}
方法三：使用fond-size：0
.frame{
    width: 300px;
    height: 300px;
    background-color: #71b9f1;
     font-size:0
}