アコーディオンの中身を増やすとfooterの下に余白が生まれる

Question

<input id="acd-checksample" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-checksample">
　<img src="images/dicon.png" width="16" height="16" alt=""/>
　<font color="#001089">【サンプル1】</font></label>
<div class="acd-content">
<a href="https:～～>サンプル1</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
<a href="https:～～>サンプル2</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
<a href="https:～～>サンプル3</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
<a href="https:～～>サンプル4</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
<a href="https:～～>サンプル5</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
<a href="https:～～>サンプル6</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
<a href="https:～～>サンプル7</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
<a href="https:～～>サンプル8</a><br>
<font size="2">
  <p class="ss">(※注意事項)/p></font><br>
</div>

として、アコーディオンの中に、8個のDLファイルを置きたいと思っています。

【サンプル5】までは問題なかったのですが、
【サンプル6】を追加した途端に、footerの下に空白が生まれました。
【サンプル7】を追加すると、更に空白は増え、
【サンプル8】を追加すると、また更に空白が増えました。

原因を探るにはどこを見れば良いのでしょうか。
また、解決策を教えて頂きたいと思います。

なんとなくですが、footerまでの長さをオーバーした分が、footerの下にでていそうです。
（アコーディオンを開くと空白は消えました。）
その場合、中身を短くする他無いでしょうか。

Answer 1

footerまでの距離を考え、削れる部分を削り、
フォントを小さく出来るところはしました。

Answer 2

原因を探るにはどこを見れば良いのでしょうか。

google developer toolsが良いのではないかと思います。

私ならまず、(option + command + i)でelementsタブで該当の場所のHTMLタグに付与されているclassとかを更に下のstylesで見て、cssの値変えたりして全体的な動きを見て原因追求します。

https://www.buildinsider.net/web/chromedevtools/01

Comments

[退会済みユーザー]

>google developer tools
でfooter要素のみ確認済みです。
まず、footer要素を一つづつ消してみましたが解決出来ませんでした。

[mackintosh]

styleを変更して動きとか見てみましたか？
この質問だけでは見えない部分が多いのでなんともいえませんが
余白がmarginなのかpaddingなのか調べて、打ち消せば良いと思います。

[退会済みユーザー]

影響が出そうなところで試しましたが、折りたたんだ状態で、
footer下の空白が消えることは有りませんでした。

ありがとうございました。