去除元素间距的解决方法
<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>
<p class="frame">
<p class="left">左</p>
<p class="right">右</p>
</p>
显示结果：
我们可以看到，两个元素之间有着非常明显的间隙，这应该是我们写代码的过程中遇到的问题中算是很常见的问题，那么我们应该怎么去解决呢?
方法一：去掉标签段之间的空格
<p class="frame">
<p class="left">左</p><p class="right">右</p>
</p>
方法二：使用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
}