如何在兩個嵌入塊元素（包含屏幕截圖）之間添加空格？

我目前正在製作網頁響應，然而，當屏幕分辨率爲1282 X 630，這是我收到這兩個inline-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>

我該怎麼辦呢？

我欣賞所有回覆。

來源

2017-06-26 Thierry Diallo

也許你可以把你的代碼轉換成[堆棧摘錄]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html -code-snippets /），這樣我們就可以更容易地重現你的問題。 – domsson

你是說的
？ – user5014677

'div.shop {margin-right：2px;}'？ – reporter

您可以添加到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>

來源

2017-06-26 11:06:30 athi

我試圖在兩個內嵌塊元素之間添加一個空格，而不是在底部。我嘗試使用margin-right：2px，但它仍然不想工作 –

請添加一個工作片段 – athi

哦等一下，我的媒體查詢沒有正確編碼......我添加了邊距並且現在可以使用 –

使用Flex相反，如內聯塊具有預設保證金。


 

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

來源

2017-06-26 11:39:40

如何在兩個嵌入塊元素（包含屏幕截圖）之間添加空格？

回答

相關問題