tenho um widget que vou inserir alguamas imagens,e dentro desse widget tenho uma div e outra div detro dela onde serão inseridas as imagens, e mais duas divs onde ficaram um titulo e uma imformação abaixo desse titulo.O problema é que as images estão ficando com uma margem grande no topo, como posso consertar isso? ou podem me dar alguma outra forma de fazer essa implementação?
códigos abaixo:
.noticiaarea2 {
width: 310px;
height: 420px;
float: right;
}
.clear {
clear: both;
}
.noticia_item {
text-align: left;
height: 88px;
}
.noticia_img {
width: 80px;
height: 80px;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.noticia_titulo {
float: left;
margin-left: 6px;
font-size: 16px;
width: 216px;
}
.noticia_info {
float: left;
margin-left: 6px;
color: #999;
width: 216px;
}
<div class="widget">
<div class="widget_titulo">NOTÍCIAS</div>
<div class="widget_conteudo">
<div class="noticiaarea1">
</div>
<div class="noticiaarea2">
<div class="noticia_item"></div>
<div class="noticia_img">
<img src="" border="0" width="80" height="80">
</div>
<div class="noticia_titulo">Algum titulo qualquer</div>
<div class="noticia_info">500 comentários</div>
<div class="noticia_item"></div>
<div class="noticia_img">
<img src="" border="0" width="80" height="80">
</div>
<div class="noticia_titulo">Algum titulo qualquer</div>
<div class="noticia_info">500 comentários</div>
<div class="noticia_item"></div>
<div class="noticia_img">
<img src="" border="0" width="80" height="80">
</div>
<div class="noticia_titulo">Algum titulo qualquer</div>
<div class="noticia_info">500 comentários</div>
</div>
<div style="clear: both;"></div>
</div>
</div>