Question

I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :

<div id="mainbody">
  <div class="news_box">
    <div class="news_box_inside">
      <img src="img/newsbox1.jpg" width="270" height="140" border="0" />
      <div class="news_box_bar"></div>
    </div>
  </div>
</div>

#mainbody {
  margin: 0 auto;
  width: 900px;
  padding-top:30px;
  padding-bottom:30px;
}

.news_box {
  float:left;
  width:288px;
  height:348px;
  background-color:#DDDDDD;
  margin-right:5px;
  margin-left:5px;
  border:1px;
  border-style:solid;
  border-color:#BBBBBB;
}

.news_box_inside {
  float:left;
  margin:9px;
  width:270px;
  height:330px;
  background-color:#FCFCFC;
}

.news_box_bar {
  background-color:#540000;
  height:43px;
  border:1px solid #892d2d;
}

I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can’t get rid of the space. Anyone got a good solution ?

Best regards,

Kris

Answer 1

Add this to your CSS:

.news_box_inside > img {
    display: block;
}

Example: http://jsfiddle.net/grc4/TV4zT/