Question

我遇到了两个div标签之间有gap的问题。这是我的代码 - 我试图手动覆盖与两个div相关联的边距/填充，但似乎没有帮助。

这是CSS的样子

.left_block{
  display: inline-block;
  background-color: blue;
  width:40%;
  height: 2em;
  margin: 0px;
  margin-right: 0px;
  padding-right: 0px;
  border-width: 0px;
  overflow: hidden;
}

.right_block{
  margin: 0px;
  display: inline-block;
  background-color: red;
  width: 59%;
  height: 2em;
  margin-left: 0px;
  padding-left: 0px;
  border-width: 0px;
  overflow: hidden;
}

这是HTML部分

 <div class="playground">
        <div class = 'left_block'></div>
        <div class = 'right_block'></div>
...

我错过了什么？

Answer 1

使用float属性怎么样？你的CSS会有问题吗？

.left_block {
  display: inline-block;
  background-color: blue;
  width: 40%;
  height: 2em;
  margin: 0 auto;
  padding: 0;
  float: left;
}
.right_block {
  display: inline-block;
  background-color: red;
  width: 60%;
  height: 2em;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  float: left;
}

<div class="playground">
  <div class='left_block'></div>
  <div class='right_block'></div>
</div>

两个div之间的差距

1 个答案: