1

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

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

以下のリンクを使用して、問題の実用的な解決策を確認してください

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 に答える
0

次のようにニュースバーに余白を追加するだけです: 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 に答える