Question

我有两个<div>部分，一部分内容位于顶部，另一部分位于下方。我希望<div>位于其他人之上，我想要删除两个<div>之间的空格。我该怎么做？

＆＃13;

.boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background: #5AAD97;
}

.boxed-green h3 {
  padding: 4% 6% 3% 6%;
  margin-top: 1%;
  font-family: "Verdana", "Times New Roman";
  font-weight: bold;
  font-size: 19px;
  color: black;
}

.boxed-green h4 {
  padding: 0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color: black;
}

img {
  margin: 0;
  padding: 0;
  display: block;
}

＆＃13;

<div class="container">
  <div class="col-md-3">
    <div class="boxed-green">
      <p>
        <h3> Who We Are </h3>
      </p>
      <p>
        <h4>Test Test Test Test Test Test</h4>
      </p>
    </div>
    <div>
      <img src="images\vivid_studios\studio1_1.png" alt="Picture1">
    </div>
  </div>
</div>

＆＃13;

Answer 1

希望这会有所帮助：div{line-height:0;}

Answer 2

将.boxed-green更新为以下

     .boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background:#5AAD97;
  line-height:0;
}

Answer 3

请查看小提琴：https://jsfiddle.net/NayanaDas/jpewas4f/。将margin-bottom:0px;添加到课程＆＃34; .boxed-green h4＆＃34;，如下所示：

.boxed-green h4 {
  padding :0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color:black;
  margin-bottom:0px;
 }

Answer 4

为margin: 0元素提供p。默认情况下，p元素采用浏览器定义的原生边距属性。

另外，将margin-bottom: 0提供给.boxed-green h4。

参考代码：

＆＃13;

.boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background: #5AAD97;
}

.boxed-green h3 {
  padding: 4% 6% 3% 6%;
  margin-top: 1%;
  font-family: "Verdana", "Times New Roman";
  font-weight: bold;
  font-size: 19px;
  color: black;
}

.boxed-green h4 {
  padding: 0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color: black;
  margin-bottom: 0;
}

img {
  margin: 0;
  padding: 0;
  display: block;
}

p {
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="container">
  <div class="col-md-3">
    <div class="boxed-green">
      <p>
        <h3> Who We Are </h3>
      </p>
      <p>
        <h4>Test Test Test Test Test Test</h4>
      </p>
    </div>
    <div>
      <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTYxMjk0NDg4Ml5BMl5BanBnXkFtZTgwODcyNjA5OTE@._V1._SX600_SY600_.jpg" alt="Picture1">
    </div>
  </div>
</div>

＆＃13;

Answer 5

H4确实有浏览器应用的默认边距，因此您必须将其设为0。

您的代码中存在很少的错误：

请勿在{{1}}代码中使用标题代码，因为它会终止p代码（more info）。

尝试使用reset或normalise css。因为这不允许浏览器应用它们的默认样式。

.col-md-3 > div{
line-height:0;
}
.boxed-green {
  margin-top: 1%;
  padding: 0 8px 0 8px;
  border: none;
  background:#5AAD97;
}

.boxed-green h3 {
  padding :4% 6% 3% 6%;
  margin-top: 1%;
  font-family: "Verdana", "Times New Roman";
  font-weight: bold;
  font-size: 19px;
  color:black;
}

.boxed-green h4 {
  padding :0% 6% 8% 6%;
  font-size: 14px;
  font-family: "Verdana", "Times New Roman";
  color:black;
  margin-bottom: 0;
 }

 img {
  margin:0;
  padding:0;
  display: block;
}

如何删除div之间的空格？

5 个答案: