htmlでお互いにたくさんの画像を貼ります

Question

私は7枚の画像を並べていますが、すべての画像の間には小さなスペースがあります。私はこの空間を取り除こうとしていますが、画像は重なり始めます。各画像はdivにあります。

HTML

<div class="row wrapper"> 
      <div class="col container"><img ng-src="{{data.firstDisplay.src}}" alt="?"></div> 
      <div class="col container"><img ng-src="{{data.secondDisplay.src}}" alt="?"></div> 
      <div class="col container"><img ng-src="{{data.thirdDisplay.src}}" alt="?"></div> 
      <div class="col container"><img ng-src="{{data.forthDisplay.src}}" alt="?"></div> 
      <div class="col container"><img ng-src="{{data.fifthDisplay.src}}" alt="?"></div> 
      <div class="col container"><img ng-src="{{data.sixthDisplay.src}}" alt="?"></div> 
      <div class="col container"><img ng-src="{{data.seventhDisplay.src}}" alt="?"></div> 
     </div> 

CSS

img { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100%; 
} 
.container { 
    max-width: 100%; 
} 

私は、フロートと余裕使用してみました：0を何も動作しないでしょう。どんな提案も役に立ちます。また、altの代わりにアイコンを置くことは可能ですか？私は現在このためにイオンを使用しています。

Answer 1

試してみてください。

img { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    padding:0; 
    max-width: 100%; 
} 
.container { 
    max-width: 100%; 
    padding:0; 

} 

あなたのコードを検査するために、クロムのか、Firefoxの開発ツールを使用する必要があります。 彼らは非常にそれはそれは常に持ったといういくつかのフォントの問題の問題が原因である各インラインブロックの後にスペースを削除します

Answer 2

が.wrapper

にfont-size: 0を試してみてくださいフル手助けしています。

テキストを含む場合、子供のフォントサイズをリセットします。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    font-size: 0; 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
img { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
}

<div class="row wrapper"> 
 
      <div class="col container"><img src="http://i.imgur.com/rYqCOO2.png?2" alt="?"></div> 
 
      <div class="col container"><img src="http://i.imgur.com/VNLbhsV.png?1" alt="?"></div> 
 
      <div class="col container"><img src="http://i.imgur.com/5hQOv35.png?1" alt="?"></div> 
 
      <div class="col container"><img src="http://i.imgur.com/ozNSHXi.png?1" alt="?"></div> 
 
    </div>

あなたには、いくつかのHTMLコードを取り除くしたい場合は、おそらくこれを行うことができます。..

* { 
 
     box-sizing: border-box; 
 
    } 
 

 
    .wrapper { 
 

 
     font-size: 0; 
 
    } 
 

 
    .container { 
 
     display: inline-block; 
 
     width: 25%; 
 
    }

<div class="row wrapper"> 
 
    <img class="col container" src="http://i.imgur.com/rYqCOO2.png?2" alt="?"> 
 
    <img class="col container" src="http://i.imgur.com/VNLbhsV.png?1" alt="?"> 
 
    <img class="col container" src="http://i.imgur.com/5hQOv35.png?1" alt="?"> 
 
    <img class="col container" src="http://i.imgur.com/ozNSHXi.png?1" alt="?"> 
 
</div>