How to remove spacing around in CSS?

Question

I have this weird spacing on the bottom and right of an image and I want to remove it. I have set the padding and margin to 0px but it still shows. This is annoying as I want the images to neatly fit into the outer box with zero spacing for a pixel perfect appearance.

img.news_title_icon {
  width: 80px;
  height: 80px;
  padding: 0px; margin: 0px; border: 0px;
}
body {
  width: 800px;
  margin: auto;
  margin-top: 50px; /* for testing */
  padding: 0px;
  font-family: arial, helvetica, sans-serif;
  font-size: 11pt;
  background-color: #001133;
  color: white;
}
div.news_title_container {    
  margin-bottom: 5px; 
}
.light_container, .dark_container {
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
  border: 1px solid #005eff;  
}
.light_container {
  background-color: rgba(0, 34, 102, 0.8); 
}

<div class="news_title_container light_container">
  <img class="news_title_icon" alt="an image">
  <img class="news_title_icon" alt="an image">
  <img class="news_title_icon" alt="an image">
</div>

Can anyone help? Thank you!

[Mystery white space underneath image tag](http://stackoverflow.com/a/31445364/3597276) — Michael Benjamin, Jan 23 '16 at 14:56

score 2 · Accepted Answer · answered Jan 23 '16 at 14:56

2

Inline blocks have this issue. For more details read this There are several ways

using float.
Using flexbox.
Removing white spaces between tags in html.
Negative margins
.....

for example there is not your issue.

<div class="news_title_container light_container">
  <img class="news_title_icon" alt="an image"><img class="news_title_icon" alt="an image"><img class="news_title_icon" alt="an image">
</div>

answered Jan 23 '16 at 14:56

Narek-T

1,898
10
20

Oh right, that did fix it but it'll make coding a real pain to have to fit it on one line. I'll look into the flexbox idea. Thanks. – Mayron Jan 23 '16 at 15:02

Shrinivas Pai · Answer 2 · 2016-01-23T14:55:58.860

1

Use float:left for image.

img.news_title_icon {
    float: left;   //added this
    width: 80px;
    height: 80px;
    padding: 0px;
    margin: 0px;
    border: 0px;
}

Updated based on OP comment use this

div.news_title_container {
    margin-bottom: 5px;
    font-size: 0; //added this
}

edited Jan 23 '16 at 14:55

answered Jan 23 '16 at 14:51

Shrinivas Pai

7,491
4
29
56

The only problem with that is then the background panel does not contain the images. The images float outside of it. – Mayron Jan 23 '16 at 14:53
Check updated answer – Shrinivas Pai Jan 23 '16 at 14:56
I suppose actually I could just make the background panel 80px in height. It seems a little messy in cases where I want to put in another image but that'll have to do. Thanks. – Mayron Jan 23 '16 at 14:56

How to remove spacing around in CSS?

2 Answers2