在图像和div之间没有空间

Question

我只是想通过使用CSS创建一个新闻框而没有那么多的IMG或TABLE垃圾。 它工作得很好但是我的图像和图片下面的彩色条之间总会出现一个空格，它应该直接在图片下方，而不是之间有一些空间。 这是我的代码：

<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;
}

我试图将图像的边距和填充设置为零或尝试位置：或顶部：但不知怎的，我无法摆脱空间。 谁有一个很好的解决方案？

最好的祝福，

短剑的一种

Answer 1

将其添加到您的CSS：

.news_box_inside > img {
    display: block;
}

示例： http ： //jsfiddle.net/grc4/TV4zT/

Answer 2

克里斯，

如果你默认检查<img>元素，它的css属性display被设置为inline-block ，所以我建议在<img>元素上应用样式并使其display:block

<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />

DEMO

Answer 3

只需在新闻栏中添加一个保证金，即showm： DEMO

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

Answer 4

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

在CSS类中设置它

Answer 5

使用下面的链接查看您的问题的工作解决方案

http://jsfiddle.net/v7NwR/

<div id="mainbody">
  <div class="news_box">
   <div class="news_box_inside">
    <figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg"  border="0" /></figure>
      <div class="news_box_bar">sdfgsdfgsdfg</div>
    </div>
  </div>
</div>

CSS

.news_box{ float:left; border:5px #444 solid;}
figure{  font-size:0%;}

#mainbody{ color:#000;}
.news_box_bar{ background:red;}