padding-bottomが効かない

Question

現在、プロゲートの道場コース中級編をやっています。

headingクラスに
padding-top: 80px;と入れると動くのですが
padding-bottom: 50px;と入れると動きません。

答えを見て、その通りにやっているのですが
全く動きません。
クラス名が間違っていないかや、誤字が無いかはしっかり確認しましたが
全く、動かないです。

どうしてこのような現象が起きるのでしょうか？

Comments

[Daregada]

質問文が、あなた以外の人にとっては意味不明です。
たとえば、

> padding-top: 80px;と入れると動くのですが
> padding-bottom: 50px;と入れると動きません。

「動くのですが」とは、どのような状態ですか。もしこれが、「あなたの思い通りの表示になる」だと、「あなたの思い通り」が他人には伝わらないので、答えが得られません。
同様に「動きません」とは、どのような状態ですか。「あなたの思い通りの表示にならない」だと、同様に他人には伝わらないので、答えが得られません。

質問文は編集可能なので、「動く」「動かない」ではなく、「(具体的な記述)になり、想定している(具体的な記述)にならない」と書く、想定している結果の画像(スクリーンショット)と、実際の結果の画像(スクリーンショット)を載せる、などしてください。

[m.ts10806]

説明よりも物を言うのは実際のコード。

[Rwight]

Daregadaさんの言うとおりです。
確かに言われて見るとそう感じます。
自分もまだまだ初心者(プログラミング・teratail)なので
質問をする時どうすればいいのかをこの文章から参考させてもらいます。

Answer 1

前提

質問者の質問はソースコードがない。画像もない。説明のみなのでわかりませんが、例えばのサイトで行きます。
ソースコードは適当にやらせていただきます。

padding-top・padding-bottom はどう違うか。

ソースコード

    <header>
        <div class="main">
            <div class="main-2">
                <h1 class="Description-1">padding-top</h1>
            </div>
            <div class="main-3">
                <h1 class="Description-2">padding-bottom</h1>
            </div>
        </div>
    </header>

.main-2 {
    position: absolute;
    width: 600px;
    height: 500px;
    margin-right: 600px;
    margin-top: 0px;
    background-color:aquamarine;
}

.main-3 {
    position: absolute;
    width: 600px;
    height: 500px;
    margin-left: 600px;
    margin-top: 0px; 
    background-color: aqua;
}

最初はこんな感じに仕上がりました。

ここからそれぞれpadding-top・padding-bottomを追加します。

.Description-1 {
    padding-top: 300px;
    background-color:chocolate
}

.Description-2 {
    padding-bottom: 300px;
    background-color:beige;
}

そしたらこういう差ができました。
説明は画像の方に書かせてもらっていますのでご確認ください。
詳しくはこのサイトをご覧ください

終わりに

・説明はあまりできないで画像付きで説明をさせていただきました。
・padding-bottomはしっかりとパディングが指定をされているのでもし信じられなかったら、background-colorで色で確認をしたほうがいいと思います。
・質問者に注意ですが(自分もそうですが)説明だけではなくて、ソースコード＋画像付き＋説明をすることで回答がしやすくなるのでこの事を守って行ったほうがいいと思います。
・それではこれで終わります、引き続き頑張ってください。

Comments

[kirakira3003]

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