CSS：如何在圖像之間添加10px？

我試圖在我的網站上的圖庫中的圖像之間添加10px的間距。我正在使用一個集成的'頁面生成器'的Wordpress自定義主題，它正在用於創建我的投資組合帖子與短代碼（不知道這是否有用的信息！）CSS：如何在圖像之間添加10px？

目前圖像是在網格佈局與零間距 - 見下圖。

我想在每張圖片之間添加一個10像素的間距，但不是在外側，因爲頁面是完整的寬度 - 請參閱下面的圖片，瞭解我希望它的外觀。

是否有人能夠幫助我修改CSS來實現這一目標？我一直在努力幾天，但它超出了我非常基本的CSS能力。

任何幫助將超級讚賞！

這裏是有問題的CSS代碼：

/* \t Gallery 
 
------------------------------------------------*/ 
 
.sr-gallery { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t width: 100%; 
 
\t overflow: hidden; 
 
} 
 

 
.sr-gallery.gallery-col3 { width: 100.5%; } 
 
\t 
 
.sr-gallery li { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t float: left; 
 
\t width: 33.33%; 
 
\t overflow: hidden; 
 
\t text-align: center; 
 
} 
 
\t 
 
.gallery-col1 li { width: 100%; } 
 
.gallery-col2 li { width: 50%; } 
 
.gallery-col3 li { width: 33.33%; } 
 
.gallery-col4 li { width: 25%; } 
 
.gallery-col5 li { width: 20%; } 
 
.gallery-col6 li { width: 16.66%; } 
 
\t 
 
.sr-gallery li a { 
 
\t display: inline-block; 
 
\t max-width: 100%; 
 
}

<ul class="sr-gallery gallery-col1"> 
 
    <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-003-1.jpg" alt=""></li> 
 
</ul> 
 

 
<ul class="sr-gallery gallery-col2"> 
 
    <li style=" 
 
    border-right: 5px solid #fff; 
 
"><img src="http://chatsingh.com/wp-content/uploads/2016/11/Secret7-007-1100x800.jpg" alt=""></li> 
 
    <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-001-1-1100x800.jpg" alt="" style=" 
 
    box-shadow: inset 10px 0 0 0 #fff; 
 
"></li> 
 
</ul> 
 

 
<ul class="sr-gallery gallery-col1"> 
 
    <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-004-1.jpg" alt=""></li> 
 
</ul>

來源

2017-01-23 Domesticated Ape

不發佈簡碼，上傳HTML輸出。 – Sysix

如果我們使用box-sizing: border-box;，那麼您可以將邊框應用到特定元素而不會破壞佈局。

.sr-gallery li { 
    margin: 0; 
    padding: 0; 
    float: left; 
    width: 33.33%; 
    overflow: hidden; 
    text-align: center; 
    border-bottom: 10px solid white; 
    box-sizing: border-box; 
} 

.gallery-col2 li { 
    width: 50%; 
    border-right: 5px solid white; 
} 

.gallery-col2 li + li { 
    border-left: 5px solid white; 
    border-right: none; 
}

來源

2017-01-23 20:42:18

幾乎？少了什麼東西？ –

對不起，我在完成信息前打入回車。我編輯了我的原始答覆。 –

更新了我的答案。請注意，爲了保持佈局正常流動，我將10px的一半作爲2個元素的邊框。所以，如果你改變了10，改變5px的那些以及任何一半。 –

你可以把整個庫比屏幕10px的更廣泛和有5px的填充（這是兩個圖像的行）。

或者，您可能會在圖像周圍填充一個左側圖像水平相對位置爲-5px，右側圖像水平相對位置爲+ 5px的圖像。棘手的部分是獲得填充/偏移權，以便在中心的分離也將是10px。

來源

2017-01-23 20:38:03 Ray

我想，你可以試試這個：

.sr-gallery img { 
    padding: 10px; 
}

既然你不公佈實際工作的例子，我不能說會或不會它的工作。

來源

2017-01-23 20:40:16

在你的情況（根據你的圖像），您可以使用Flexbox的是這樣的：

body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    background: #3794fe; 
 
    flex: 1 1 auto; 
 
    height: 100px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.child.col-1, 
 
.child.col-4 { 
 
    width: 100%; 
 
} 
 

 
.child.col-2 { 
 
    margin-right: 10px; 
 
} 
 

 
.child:last-child { 
 
    margin-bottom: 0; 
 
}

<div class="container"> 
 
    <div class="child col-1"></div> 
 
    <div class="child col-2"></div> 
 
    <div class="child col-3"></div> 
 
    <div class="child col-4"></div> 
 
</div>

來源

2017-01-23 20:48:38 TheYaXxE

CSS：如何在圖像之間添加10px？

回答

相關問題