こんにちは
CHROME検証ツールで調べるとページの一番上にパディングがあり、その下にマージンがあります。
検証ツールで調べた、styles タブの CSS をそのままコピーして、カスタマイズの [追加 CSS] にペースト(追加)されると良いかと思います。
@media (min-width: 992px) {
.siteContent {
padding: 3rem 0 3.5rem;
}
}
上パッティング3rem、下パッティング3.5rem の値を調整してみてください。
ishitaka様、ありがとうございます。
CSSを追加してパディイングを調整することが出来ました。私はマージンとパディングを取り違えていたようです。
これまでCSSが何処に書いてあるかが分かっていませんでしたが、ようやく理解出来ました。また、CSSをコピーした上で値を書き換えたものを追加CSSするというやり方が分かりました。
追加の質問ですが、元々のCSSは以下の通りで、今回追加CSSをしたのはstyleタブの上から2段目の@media (min-width: 992px)のものでした。またこのパディング値には、取り消し線が（ここでは書けないのですが）元々引いてありました。何故1段目ではなくて、この2段目を使ったのでしょうか？
@media (min-width: 1200px)
style.css?ver=13.8.11:1
.siteContent {
padding: 3.5rem 0 4rem;
}
@media (min-width: 992px)
style.css?ver=13.8.11:1
.siteContent {
padding: 3rem 0 3.5rem;
}
@media (メディアクエリ) は、デバイスの幅（ブラウザ画面の幅）などに応じて、適用する CSS を指定することができます。
詳細は下記ページをご覧ください。
https://www.tohoho-web.com/css/rule/media.htm
以下の例では、幅が1200px以上の場合は上段、992px以上は下段の CSS が適用されます。
@media (min-width: 1200px) {
.siteContent {
padding: 3.5rem 0 4rem;
}
}
@media (min-width: 992px) {
.siteContent {
padding: 3rem 0 3.5rem;
}
}
詳しいご説明ありがとうございました。勉強になります。少しづつですが分かってきました。
