如何在两个内联块元素之间添加空格（包含截图）？

Question

我目前正在制作一个网页响应，但是当屏幕分辨率为1282 x 630时，这就是我对这两个内联块元素的看法：

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

这是我的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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Flex代替，因为内联块具有默认边距。

＆＃13;

＆＃13;

   

  *
    {
      box-sizing:border-box;
     -webkit-box-sizing:border-box;
    }
    .links {
      padding-bottom: 30px;
      margin: 0 auto;
      width: 85%;
      display: flex;
    }
    .links div 
   {
      width: 50%;
      box-shadow: 6px 0px 0px #fff;
      height: 430px;
      margin-bottom: 25px;
      margin-left:10px
    }
    .links div:first-child 
    {
      margin-left:0;
    }
    .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;
    }

＆＃13;

<section class="links">

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

＆＃13;

＆＃13;

＆＃13;