###前提・実現したいこと
素人なのですが、商品のHPを管理しています。
LPを作成しましたが、オンマウス(表現あっていますでしょうか・・)の設定をした部分の画像の上下に微妙な隙間が空いてしまいます。これを隙間なく綺麗に配置したいのですが、問題箇所がわかりません。
###該当のソースコード
<style type="text/css"> #lp0318 { width: 1000px; margin: 0 auto; text-align: center; } div#container { width : 98%; background-color: transparent; padding : 0; overflow : hidden; } div#one_maincolumn { margin : 0; } body { background : url(/user_data/packages/shuawa/img/lp/1412xx/bg-01.gif); } </style> <style type="text/css"> .demo01 { background: url("/user_data/packages/shuwabon/img/mask02/maskPC03.jpg") no-repeat; /* ロールオーバー時のチラつき防止 */ } .demo01 a { width: 1000px; height:102px; background: url("/user_data/packages/shuwabon/img/mask02/maskPC03.jpg") no-repeat; display: block; text-indent: -9999px; } .demo01 a:hover { background-image: url("/user_data/packages/shuwabon/img/mask02/maskPC03B.jpg"); } </style> <style type="text/css"> .demo02 { background: url("/user_data/packages/shuwabon/img/mask02/maskPC05.jpg") no-repeat; /* ロールオーバー時のチラつき防止 */ } .demo02 a { width: 1000px; height:92px; background: url("/user_data/packages/shuwabon/img/mask02/maskPC05.jpg") no-repeat; display: block; text-indent: -9999px; } .demo02 a:hover { background-image: url("/user_data/packages/shuwabon/img/mask02/maskPC05B.jpg"); } </style> <style type="text/css"> .demo03 { background: url("/user_data/packages/shuwabon/img/mask02/maskPC12.jpg") no-repeat; /* ロールオーバー時のチラつき防止 */ } .demo03 a { width: 1000px; height:84px; background: url("/user_data/packages/shuwabon/img/mask02/maskPC12.jpg") no-repeat; display: block; text-indent: -9999px; } .demo03 a:hover { background-image: url("/user_data/packages/shuwabon/img/mask02/maskPC12B.jpg"); } </style> <style type="text/css"> .demo04 { background: url("/user_data/packages/shuwabon/img/mask02/maskPC14.jpg") no-repeat; /* ロールオーバー時のチラつき防止 */ } .demo04 a { width: 1000px; height:88px; background: url("/user_data/packages/shuwabon/img/mask02/maskPC14.jpg") no-repeat; display: block; text-indent: -9999px; } .demo04 a:hover { background-image: url("/user_data/packages/shuwabon/img/mask02/maskPC14B.jpg"); } </style> <div id="lp0318"> <!-- <h1 class="magi"><img src="<!--{$smarty.const.URL_DIR}-->user_data/packages/shuawa/img/lp/1412xx/logo.png"></h1> <br>--> <div id="section"> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC01.jpg"></p> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC02.jpg"></p> <div class="demo01"> <p> <a href="http://shuawa.jp/cart/direct.php?param[]=30|1||®ular="" title="通常購入" > </a></p></div> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC04.jpg"></p> <div class="demo02"> <p> <a href="http://shuawa.jp/cart/direct.php?param[]=31|1||®ular="" title="通常購入" > </a></p></div> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC06.jpg"></p> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC07.jpg"></p> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC08.jpg"></p> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC09.jpg"></p> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC10.jpg"></p> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC11.jpg"></p> <div class="demo03"> <p> <a href="http://shuawa.jp/cart/direct.php?param[]=30|1||®ular="" title="通常購入" > </a></p></div> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC13.jpg"></p> <div class="demo04"> <p> <a href="http://shuawa.jp/cart/direct.php?param[]=31|1||®ular="" title="通常購入" > </a></p></div> <p><img src="/user_data/packages/shuwabon/img/mask02/maskPC15.jpg"></p> </div> <div id="lpfooter"> <ul> <li><a href="/privacy/index.php">プライバシーポリシー</a></li> <li><a href="/order/index.php">特定商取引法に基づく表記</a></li> </ul> <ul> <li><a href="http://shuawa.jp/">TOPページ</a></li> </ul></div> </div><p>© SHUAWA.INC.All Right Reserved</p>
コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
LPってなんですか?
ランディングページ(landing page)ですかね?http://e-words.jp/w/%E3%83%A9%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%9A%E3%83%BC%E3%82%B8.html