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

在图像和div之间没有空间

5 个答案: