2つのインラインブロック要素間のスペースを追加する方法（スクリーンショットが含まれます）？

Question

私は現在、画面の解像度がX 630 1282であるときしかし、これは私がこれらの2つのインラインブロック要素を取得しています何で、Webページが応答作っている：あなたが見ることができるように

要素は両方とも一緒に接着される。私はそれらの間にスペースを入れて、それらを分けたいと思っています。ここで

は私の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

インラインブロックはデフォルトのマージンを持っているとして、あなたは、代わりに.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>

Answer 2

使用するFlexにmarginを追加することができます。

 

 
    * 
 
    { 
 
     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; 
 
    }

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