1

我只是想通过使用 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;
}

我试图将图像的边距和填充设置为零或尝试位置：或顶部：但不知何故我无法摆脱空间。有人有好的解决方案吗？

最好的祝福，

克里斯

4

5 回答 5

2

将此添加到您的 CSS 中：

.news_box_inside > img {
    display: block;
}

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

于 2013-02-20T05:21:01.690 回答
1

克里斯，

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

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

演示

于 2013-02-20T05:23:06.470 回答
0

只需将边距添加到您的新闻栏，如 showm：DEMO

.news_box_bar {
  background-color:#540000;
  height:43px;
  border:1px solid #892d2d;
  margin-top:-5px;
}
于 2013-02-20T05:20:27.853 回答
0 
.news_box_bar {
  background-color:#540000;
  margin-top:-5px;
 height:43px;
  border:1px solid #892d2d;
}

在你的 CSS 类中设置它

于 2013-02-20T05:20:31.830 回答
0

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

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;}
于 2013-02-20T13:07:38.260 回答