liで作る画像縦並びのバナーリスト

CSSで余白を調整。

背景色は範囲を分かりやすくするためにつけています。マウスオーバー用に画像もCSSも作っていますが、不要なら削除してください。

HTMl

<div class="mod_Banner002">
<ul>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
</ul>
<!-- mod_Banner002_end --></div>

CSS

.mod_Banner002{
	width:200px;
	padding:10px;
	background-color:#EEE;
}
.mod_Banner002 ul{
	margin-bottom:-5px;
}
.mod_Banner002 li{
	width:200px;
	height:60px;
	vertical-align:bottom; /* IE6で画像下の隙間削除 */
	margin:0 0 5px 0;
	overflow:hidden;
}
.mod_Banner002 li a{
	display:block;
}
.mod_Banner002 li a:link    {}
.mod_Banner002 li a:visited {}
.mod_Banner002 li a:hover   {margin-top:-60px;}
.mod_Banner002 li a:active  {margin-top:-60px;}