※ ChatGPTを利用し、要約された質問です（原文：html5でブロックとブロックの間に隙間ができる）
html5でブロックとブロックの間に隙間ができる
下記のホームページを作りました。
しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。
いろいろ試しましたが、隙間が目られません。
原因を教えていただけると幸いです。
[html5]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
<link href="style/main.css" rel="stylesheet" type="text/css">
<meta name="author" content="HTMQ">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
</head>
<body>
<header>
<section>
<h1>格安ホームページ制作会社 - hompa（ホムペ） -</h1>
</section>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<nav>
<ul>
<li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li>
<li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li>
<li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li>
<li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li>
<li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li>
<li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li>
<li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li>
</ul>
</nav>
</div>
<!-- header -->
<div class="clearfix"></div>
<!-- slidmain -->
<div id="slidemain">
<p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p>
</div>
<!-- slidmain -->
</div>
<!-- container -->
</header>
</body>
</html>
[CSS]
@charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
}
div#container {
text-align:left;
width:980px;
margin: 0 auto;
}
div#header {
width:840px;
text-align:left;
margin: 0 auto;
padding-top:20px;
}
h1 {
text-indent: -9999px;
display: none;
}
ul {
list-style:none;
}
li {
float:left;
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
#slidemain {
width:980px;
height:450px;
}
#slideshow {
position: relative;
width: 980px;
height: 450px;
}
#slideshow img {
position: absolute;
top: 0;
left:0;
z-index: 8;
opacity: 0.0;
}
#slideshow img.active {
z-index: 10;
opacity: 1.0;
}
#slideshow img.last-active {
z-index: 9;
}
