コンテンツとフッターの間に隙間を入れたいです。

.contentsと.ftrの間に7remの間隔を開けたいのですがうまく行きません。
ご指南のほどよろしくお願い致します。
https://practice2017.web.fc2.com/hotel_imperial_resort_tokyo/root/base.html

(HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0">
<title>結婚式場のコンセプト|HOTEL IMPERIAL RESORT TOKYO</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body id="base">
<header id="top" class="hdr"><!-- 【ヘッダー】 -->
  <h1><a href="index.html"><img src="img/logo_01.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1>
</header><!-- /#top .hdr -->
<nav class="gnav" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション -->
  <ul class="wrap-list">
    <li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li>
    <li id="nav_plan"><a href="plan.html">プランのご案内</a></li>
    <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li>
    <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li>
  </ul><!-- /.wrap-list -->
</nav><!-- /.gnav -->
<div id="breadcrumb">
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li>結婚式場のコンセプト</li>
  </ul>
</div><!-- /#breadcrumb -->
<div class="contents"><!-- 【コンテンツ】 -->
  <section class="contents-main"><!-- 【メインコンテンツ】 -->
    <article>
      <h2>結婚式場のコンセプト</h2>
    </article>
  </section><!-- /.contents-main -->

  <div class="contents-sub"><!-- 【サブコンテンツ】 -->
    <aside>
      <div class="bnr-inner">
        <a href="plan.html">
          <dl>
            <dt><img src="img/bnr_contents_sub_plan_01.jpg" alt="プランのご案内"></dt>
            <dd>標準のプランをご紹介いたします。</dd>
          </dl>
        </a>
      </div><!-- /.bnr-inner -->
      <div class="bnr_inner">
        <a href="contact.html">
          <p><img src="img/bnr_contents_sub_contact_01.png" alt="お問い合わせ"></p>
        </a>
      </div><!-- /.bnr-inner -->
    </aside>
  </div><!-- /.contents-sub -->
</div><!-- /.contents -->

<footer class="ftr"><!-- 【フッター】 -->
  <p id="topPage"><a href="#top">ページの先頭へ戻る</a></p>
  <address>東京都千代田区Ｘ－Ｘ－Ｘ 電話　０１２０－０００－ＸＸＸＸ　営業時間　１１：００～２０：００（水曜日定休日）</address>
  <p id="copyright"><small>Copyright &copy;2014 HOTEL IMPERIA RESORT TOKYO All rights reserved.</small></p>
</footer><!-- /.ftr -->
</body><!-- /#base -->
</html>

(CSS)
@charset "utf-8";

/* 【共通箇所・基本設定：ページ全体】 ここから↓ */
/* フォントサイズ */
html { font-size:  62.5%; } /* 62.5%:1rem:10px */
body { font-size: 1.4rem; } /* =14px <p>や<a>などの設定。 */
h1   { font-size: 2.8rem; } /* =28px */
h2   { font-size: 2.1rem; } /* =21px */
h3   { font-size: 1.6rem; } /* =16px */
h4   { font-size: 1.4rem; } /* =14px <p>と同じ大きさ。 */

body {
  background-color:#f3f2e9;
  color: #5f5039;
  line-height:1.5;
  margin: 0 auto;
  width: 84rem;
}

li {
  list-style : none;
}


/* 【ヘッダー】 ここから↓ */
header h1 {
  margin: 0 0 2.6rem 0;
  padding-top: 2.8rem ;
  text-align: center;
}


/* グローバルナビゲーション　リストを横に並べる。 */
.wrap-list {
  margin   : 0 0 2rem 0;
  overflow : hidden;
  padding  : 0;
}

.gnav li {
  float : left;
  width : 21rem;
}

/* グローバルナビゲーションのリンクに画像を指定する。 */
#nav_concept a {
  background-image:url(../img/gnav_01.png);
}

#nav_plan a {
  background-image:url(../img/gnav_02.png);
}

#nav_fair a {
  background-image:url(../img/gnav_03.png);
}

#nav_contact a {
  background-image:url(../img/gnav_04.png);
}

.gnav a {
  overflow:hidden;
  display:block;
  padding-top:4.4rem;
  height:0;
}
/* 【ヘッダー】 ここまで↑ */


/* 【コンテンツ】 
メインコンテンツとサブコンテンツを横に並べる。 */
.contents {
  overflow:hidden;
}

.contents-main {
  float:left;
  width:57rem;
}

.contents-sub {
  float:right;
  width:23rem;
}
/* 【コンテンツ】 ここまで↑ */


/* 【フッター】 */ 
.ftr {
  margin-top: 7rem;
}
/* 【フッター】 ここまで↑ */ 
/* 【共通箇所・基本設定：ページ全体】 ここまで↑ */

yoshinavi

2019/07/06 01:09

提示のコードでは、余白スペースが取れているように思います。

行動規範の内容に同意します

回答1件

ベストアンサー

cssの構文も問題ありませんし、codepenでも再現しませんでした。
しかし提示のサイト確認すると、cssが確かに効いてないですね。
キャッシュのクリアとかはやってみましたか？

投稿2019/07/05 09:06

mepon

総合スコア480

taka_oct092018

2019/07/05 12:11

mepon様返信ありがとうございます。キャッシュの削除をしてみましたが結果は変わりませんでした。仕方なく以下のようにCSSを変更してみました。 .contents { overflow:hidden; margin-bottom:7rem; /* 追加 */ } .ftr { /* 削除 */ } 今度は隙間が入りました。一応は当初の装飾は実現出来ましたが、不具合は不明なままです。

mepon

2019/07/05 12:23

キャッシュ削除でも変わらないとのことで。個人的に腑に落ちないので可能であれば構いません下記お試しいただけますか？ ①詳細度の引き上げ .ftr { margin-top:7rem !important; } ②footer要素に対して直接cssを適用 .ftr { /* 削除 */ } /* 追加 */ footer { margin-top:7rem; } （これはクラスじゃないので先頭のドットはいりません）なんか気持ち悪いのでお手すきの際にでもテストしていただければ。

taka_oct092018

2019/07/05 12:40

mepon様 ①と②の両方を検証してみましたが、うまく行きませんでした。

mepon

2019/07/05 12:57

検証ありがとうございます。私の方でもデベロッパーツール上で直接cssファイル弄ってみました。 /* 【フッター】 */ とコメントアウトしてる部分があると思いますが、文末（コメントアウトの〆）の後ろにスペース入ってないですか？ /* 【フッター】 */ ○←この○部分にスペースがあり、それを削除してみたところ何故かcssが適用されるようになりましたね。（デベロッパーツール上では） .ftrを/* 【フッター】 */この上に一度動かして確認してみるとよいかもです。

yoshinavi

2019/07/06 01:44 編集

mepon 様たしかに、ここだけ影響を受けていますね。他の箇所にもスペース付けても認識されているのに、「.ftr」のみ認識されていないですね。一旦、削除して、追加しても認識されているので、何か他の影響があるのかもですね。

taka_oct092018

2019/07/06 01:56

mepon様アドバイスありがとうございます。ご指摘の通りコメント文の半角スペースを削除すると正常に機能しました。どうしても原因が分からなくて苦しかった分、上手く行くとすごく嬉しかったです。経験の浅い私ではとても自力では克服出来なったので、とても助かりました。

mepon

2019/07/06 04:05

>yoshinaviさん私も正直初めて見たケースで、こんな事もあるんだな～って勉強になりました。原因はつかめましたが、何が影響し作用した結果「.ftr」要素のみcssが効かなかったのかまでは分からなかったので、ちょっと気になりますね！ >taka_oct092018さんやはりそちらの環境でもスペースが原因でしたか今回についてはかなりレアケースですよ、私も初めて遭遇した現象ですし分からなくてもしょうがないかと。ひとまず、解決できたようで何よりです。

行動規範の内容に同意します