I'm regularly working with bootstrap but this issue came to me recently...
For some reason when I try to work with images, my row-col overflow lose their padding.
However when working with p elements the padding is there.
Would someone have any ideas on why this is happening ? and or how to solve this.
p {
background-color: rgb(255, 0, 0);
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h1>Not Working</h1>
<div class="row">
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/F94ECFFF0FA9C321C108DA34E777B27B0AC9D5F8/66944.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/0CB2040408D0789690575FFE3532F3C34B693C6F/340417.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/021DA825F2092327B1C6BC09EC77BD5DE5B4770D/65961.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/7AF3232140CB5DF159E4E54C2F092F69B5BD460F/499376.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/18CE5D78317265000CF3C23ED76AB3CEE86BA60E/65941.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/205871B734054D0206986FB44D6DC5425E572B0B/220465.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/66BEAC3E5D0EDA160AA4A7942D0C46C27DC0E7AA/65944.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/33653CA0C67796BE03A22B5AE3197D0564376700/434533.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/CC3A2CAADBB2F2B13B1E70079E7E207B08D16E93/65946.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/0BDAA40E3795930BBF3DC5ACE366ABAE2D5BBFB2/65947.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/3501C2BBADF95BE5F14E31484850E851EFCA33CB/434536.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/E90FE803CDC205CDEB13FE03694D4D04757ACF5D/65928.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/A6E2C82153BA684E2D05D3FCA09F3E02431366ED/220461.png" width="50px" height="50px">
</div>
<div class="col-md-1 col-sm-2">
<img src="https://render.guildwars2.com/file/413D7EE8CE04C0BC07C31A4B381EB6344150F849/65930.png" width="50px" height="50px">
</div>
</div>
<h1>Working</h1>
<div class="row">
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
<div class="col-sm-4 col-md-4"><p>A COL</p></div>
</div>You have space between column because there is margin-bottom on p tag. If you want same thing to img tag then apply margin-bottom to img tag too.