아무리 수정해도 줄바뀔때 간격이 안없어지네요 ul/li 특성 때문인지 어쩐지
골치아프네요

검정색으로 < 표시된부분에 여백이 안없어지네요

<?
if (!defined('_GNUBOARD_')) exit;
?>
<script type="text/javascript" src="<?=$g4[path]?>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/js/jquery.imageScroller.js"></script>


div#scroller {
position:relative;
height:181px;
width:165px;
padding:0 0px;
margin:0;
clear:both;
overflow:hidden;
border:0px #999 solid
}

/*좌우버튼*/
div.button {
height:30px;
width: 165px;
border: 1px solid #F00;
}
#btn1, #btn2 {cursor:pointer}

ul#scrollerFrame {
width:165px;
margin:0;
list-style:none;
height: 181px;
padding: 0px;
}
ul#scrollerFrame li {
position:relative;
float:left;
width:165px;
height:130px;
text-align: center;
margin: 0px;
padding: 0px;
}

/*가격 및 설명 부분*/
ul#scrollerFrame li p {margin:0;padding:0}
.price{
font-family:verdana;
font-size:12px;
font-weight:bold;
text-align:center;
color:#0a62cf;
padding-bottom: 3px;
}
.comment{
font-family:돋움;
font-size:12px;
text-align:center;
color:#555;
}

/*붙박이 아이콘 설정*/
.besticon {position:absolute;top:0;left:0}

#scroll_ul {
border: 1px solid #CCC;
background-color: #F7F7F7;
width: 163px;
height: 181px;
}
#sc_title {
font-family: "돋움";
font-size: 12px;
font-weight: bold;
color: #999;
float: left;
width: 120px;
text-align: center;
margin-right: 5px;
margin-left: 3px;
}
</style>                       
<script type="text/javascript">

$(function(){
   
$("#scroller").imageScroller({
next:"btn1",                  //다음 버튼 ID값
prev:"btn2",                  //이전 버튼 ID값
frame:"scrollerFrame",        //스크롤러 프레임 ID값 
width:120,                    //이미지 가로 크기
child:"li",                    //스크롤 지정 태그
auto:true                      //오토 롤링 (해제는 false)
});
});
</script>
    <div class="button">
<span  id="btn1" style="float:left;"><IMG src="<?=$g4[path]?>/img/prev_b.png" width="15" height="30" border=0></span>
<span id="btn2" style="float:right;margin:0 0 0 0;"><img src="<?=$g4[path]?>/img/next_b.png" width="15" height="30"></span>
<span  style="float:right; margin:10px 0px 0 0; text-align: center; width: 130px; color: #666;"><strong>관련상품</strong></span>   
</div>
  <div id="scroll_ul">
    <div id="scroller">
<ul id="scrollerFrame">
<?
for ($i=0; $row=sql_fetch_array($result); $i++) {
    if ($i > 0 && $i % $list_mod == 0) {
       
    }
    $href = "<a href='$g4[shop_path]/item.php?it_id=$row[it_id]'>";
?>
<li><?=$href?><?=get_it_image($row[it_id]."_s", $img_width, $img_height)?></a>
<div class="comment"><?=$href?><?=cut_str(stripslashes($row[it_name]), 30)?></a></div>
<div class="price"><?=display_amount(get_amount($row), $row[it_tel_inq])?></div>
</li>
<? } ?>
    </ul></div>
</div>


////////////////////////링크된 jquery.imageScroller.js속에 이런 내용이 잇기는 하지만..

jQuery.fn.imageScroller = function(params){
var p = params || {
next:"buttonNext",
prev:"buttonPrev",
frame:"scrollerFrame",
width:120,
child:"a",
auto:true
};
var _btnNext = $("#"+ p.next);
var _btnPrev = $("#"+ p.prev);
var _imgFrame = $("#"+ p.frame);
var _width = p.width;
var _child = p.child;
var _auto = p.auto;
var _itv;

var turnLeft = function(){
_btnPrev.unbind("click",turnLeft);
if(_auto) autoStop();
_imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
_imgFrame.find(_child+":first").appendTo( _imgFrame );
_imgFrame.css("marginLeft",0);
_btnPrev.bind("click",turnLeft);
if(_auto) autoPlay();
});
};

var turnRight = function(){
_btnNext.unbind("click",turnRight);
if(_auto) autoStop();
_imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
_imgFrame.css("marginLeft",-_width);
_imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
_imgFrame.find(_child+":last").remove();
_btnNext.bind("click",turnRight);
if(_auto) autoPlay();
});
};

_btnNext.css("cursor","hand").click( turnRight );
_btnPrev.css("cursor","hand").click( turnLeft );

var autoPlay = function(){
  _itv = window.setInterval(turnLeft, 5000);  //롤링 시간 설정 3000=3초
};
var autoStop = function(){
window.clearInterval(_itv);
};
if(_auto) autoPlay();
};