Wordpressで画像やフッターに余計な空白が入ってしまう。

Question

WordPressのtwentyseventeenというテーマに子テーマを作って使っています。

下記の静的ページのようにWordPressも作り変える予定なのですが、静的ページよりも

空いている画像間の隙間やフッターの下の隙間がどうやっても削れません。

フッターの下の隙間はFirefoxとChromeで発生します。（PCがMaｃなのでIEでは未確認）

キャッシュも削除してみましたがダメでした。

また、この状態でiPhone 7s plus　のSafariで確認するとフッターのピンクの背景が半分消えてしまいます。

何かアドバイスや解決策があればご享受下さい。

静的ページ：http://tulejaentertainment.com/
WordPress：http://tulejaentertainment.com/news/

試したこと

img {
vertical-align: bottom;
display:block;
}

* {
	margin:0 auto;
	padding:0;
}

.clearfix:after {
	content: '';
	clear: both;
	display: block;
    height: 0px;
    visibility: hidden;
    font-size: 0;
}

上記の事を試したら多少は画像間の隙間が減りましたがそれでも静的ページのようはなりませんでした。
[functions.php]

add_filter( 'wp_nav_menu', 'chomp_wp_nav_menu' );
function chomp_wp_nav_menu( $nav ) {
    $nav = str_replace( "\r\n", "<!--\r\n-->", $nav );
    $nav = str_replace( "\n", "<!--\n-->", $nav );
    $nav = str_replace( "\r", "<!--\r-->", $nav );
    return $nav;
}
?>
add_filter( ‘show_admin_bar’, ‘__return_false’ );

ヘッダー上部の隙間が一部解消されましたが静的ページのようにはなりませんでした。

Answer 1

各要素（<ul>や<p>など）にmarginが当たっているようなので開発者ツールで確認しながらstyle.cssにmargin: 0;など追記していくと良いでしょう

一応分かる範囲で書いておきます

ul {
  margin-bottom: 0;
}

hr.hr_img {
  margin-bottom: 0;
}

p.ftp1,
p.ftp2 {
  margin-bottom: 0;
}

宝箱の画像の間は<li class="menu01">...</li>の後ろに    という空白が入っているのでそれを削除すれば直るはずです

Comments

[退会済みユーザー]

ありがとうございます。未だに開発者ツールやChromeの検証ツールに慣れていないのでがんばってなれて行こうと思います。あと細かいミス？も見ていかないといけないですね。DreamweaverのHTMLのクリーンアップでは問題なかったのですが、自分の目でも見ないとダメですね。

[退会済みユーザー]

教えて頂いた方法で色々margin:0などを入れてみたらうまくいきました。といってもまだ１００％ではありませんが、この方法で行こうと思います。ありがとうございました。