html - 如何在两个内联 block 元素之间添加空间(包括屏幕截图)？

Question

我目前正在制作响应式网页，但是当屏幕分辨率为 1282 x 630 时，这就是我使用这两个内联 block 元素得到的结果:

如您所见，这些元素都粘合在一起。我想在它们之间添加一个空格来分隔它们。

这是我的 HTML:

.links {
  padding-bottom: 30px;
  margin: 0 auto;
  width: 85%;
}

.links div {
  display: inline-block;
  width: 50%;
  height: 430px;
}

.shop {
  background: url("images/shopCover.jpeg") no-repeat top center;
}

.journal {
  background: url("images/journalCover.jpeg") no-repeat top center;
}

.links div h2 {
  padding-top: 170px;
  font-size: 32px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

<section class="links">

  <a href="productPage.php">
    <div class="shop">
      <h2>Shop</h2>
    </div>
  </a>
  <a href="blog/cms.php">
    <div class="journal">
      <h2>Journal</h2>
    </div>
  </a>

</section>

我该怎么做？

感谢所有回复。

Answer 1

您可以将 margin 添加到 .links div

.links {
  padding-bottom: 30px;
  margin: 0 auto;
  width: 85%;
}

.links div {
  display: inline-block;
  width: 50%;
  height: 430px;
  margin-bottom: 25px;
}

.shop {
  background: url("https://static.pexels.com/photos/27714/pexels-photo-27714.jpg") no-repeat top center;
}

.journal {
  background: url("https://static.pexels.com/photos/27714/pexels-photo-27714.jpg") no-repeat top center;
}

.links div h2 {
  padding-top: 170px;
  font-size: 32px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

<section class="links">

  <a href="productPage.php">
    <div class="shop">
      <h2>Shop</h2>
    </div>
  </a>
  <a href="blog/cms.php">
    <div class="journal">
      <h2>Journal</h2>
    </div>
  </a>

</section>