LPにて、オンマウスの設定をした画像と画像の間に隙間ができてしまう問題

Question

###前提・実現したいこと
素人なのですが、商品の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||&regular="" 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||&regular="" 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||&regular="" 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||&regular="" 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/">ＴＯＰページ</a></li> </ul>

<p>&copy; SHUAWA.INC.All Right Reserved</p>

</div> </div>

Comments

[shi_ue]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[shi_ue]

LPってなんですか？

[alg]

ランディングページ(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

Answer 1

記載されたコードだけを見る限りでは隙間が空くような要素はパッと見無いように見えますが、
肝心の画像の方に変な余白が入ってしまってるとかいうオチではないですか？

後は記載されたコード以外の部分から変なスタイルを継承してしまっている可能性も考えられます。
実際に不具合を起こしている画面を見られればもう少し探ることもできるでしょうが、
これだけでは難しいですねー。