如何添加圖片

Question

我想這樣做的HTML之間的平等空的空間，有圖像的DIV outter。 html;

<div class="posts-thumbnails"> 
         <img src="img/archive1.png"> 
         <img src="img/archive1.png"> 
         <img src="img/archive1.png"> 
         <img src="img/archive1.png"> 
         <img src="img/archive1.png"> 
         <img src="img/archive1.png"> 
</div> 

css;

.posts-thumbnails img{ 
width:100px; 
height:100px; 
margin:10px; 
} 

，但我不能管理圖像保證金或填充，如果我寫了這樣的事情，圖像有10 + 10 20空的空間，我怎麼能添加圖片

Answer 1

看，至於你的問題的評論已經指出，有很多我們不知道你想做什麼，你想怎麼它到底看（浮動，圖像的數量，定位，包含div的寬度），但如果它真的只是你問的邊際，這個答案可能就足夠了。

與

.posts-thumbnails img{ 
width:100px; 
height:100px; 
margin:5px; 
} 

只要到您的樣式DIV。

這裏是什麼樣子（的jsfiddle）：http://jsfiddle.net/manroo9c/

它通過每一個圖像周圍添加只爲5px保證金。由於上的圖像的右邊緣爲5並且在圖像的左邊右邊旁邊也如圖5所示，在端部之間的空間將是10px的之一。這種情況也適用於圖像彼此重疊的空間。

UPDATE：這將讓你保證金爲5px從圖像在任何方向包含div的邊框，雖然如此，如果你也想從圖像10px的距離，這裏邊框的一個更新的jsfiddle與5px的在包含分區填充：http://jsfiddle.net/manroo9c/1/

這裏的CSS代碼：

.posts-thumbnails img{ 
width:100px; 
height:100px; 
margin:5px; 
} 

.posts-thumbnails{ 
padding:5px; 
} 

Answer 2

這是你的平等空的空間簡單的解決方案http://jsbin.com/higidaboqe/1/edit?html,css,output 只需添加浮動，只有右&底部填充或保證金。

Answer 3

是，這是你想要做什麼??? JS FIDDLE - >https://jsfiddle.net/JTcGZ/1156/

<div id="blah"> 
     <a id="image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
     <a id="image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
     <a id="image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
     <span class="stretch"></span> 
    </div> 
    <div id="blah"> 
     <a id="image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
     <a id="image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
     <a id="image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
     <span class="stretch"></span> 
    </div> 


    #blah { 
     width: 540px; 
     margin-top:20px; 
     margin-left: auto; 
     margin-right: auto; 

     text-align: justify; 
     -ms-text-justify: distribute-all-lines; 
     text-justify: distribute-all-lines; 
    } 
    #blah a { 
     vertical-align: top; 
     display: inline-block; 
     *display: inline; 
     zoom: 1; 
    } 
    .stretch { 
     width: 100%; 
     display: inline-block; 
     font-size: 0; 
     line-height: 0 
    }