HTML/CSS paddingが反映されない

Question

こんにちは、質問お願いします。
現在、模写コーディングを行っています。

下記、画像ピンクの下にpadding 14pxを入れたいのですが、反応しません。
完成形は黒ドットがピンク部分の14px下に位置する、です。

今現状のCSSでは何の変化がありません。
どのようにpaddingを修正したらいいでしょうか？

<li>
                            <dl>
                                <dt><img src="./images/tmb_1.jpg" alt="ランキング画像01"></dt>
                                <dd>
                                    <h3><a href="#">記事タイトル</a></h3>
                                    <span id="ranking_tag">Webデザイン</span>
                                </dd>
                            </dl>
                        </li>

```CSS
div#top_ranking ul li {
  width: 348px;
  height: 55px;
  border-bottom: 8px dotted black;
  margin-top: 15px;
  padding-bottom: 14px;
  background-color: pink;
}

div#top_ranking ul li dl {
  display: flex;

}

div#top_ranking ul li dl dt {
  width: 89px;
  height: 55px;
  margin-right: 10px;
  
}

div#top_ranking ul li dl dd {
  width: auto;
  height: 55px;
}

Answer 1

模写なのであれば検証ツールで答えを見れるんじゃないかなぁと。
だから回答がつかないのだと思う。

liの枠線としてborderを当ててるから、どんなに頑張ってpaddingしても離れないと思う。
疑似要素として当ててあげると上手くいくかも？

イメージ画像載せておきます。※teratailの適当な要素に再現してみました。

Comments

[missy]

ご回答ありがとうございます。

それが、模写しているものだと質問にあげたpaddingで、ピンク部分の下に隙間ができてるんですよね。
padding-bottm -14pxでもやってみたんですが、何も変わらずなのです。

今回の場合、どのようにしたら、ピンク部分との間に14pxの隙間を作る事ができるでしょうか？

[退会済みユーザー]

paddingにマイナスの値を設定することはできないです。

差し支えなければサイトのURLを載せてください。
表現の仕方は何通りかあるので、全く同じものをお求めであれば答えを見た方が早いですし正確です。

[missy]

ご回答ありがとうございます。

サイト模写ではなく、Udemyの有料講座内でのサイトコーディングになります。
なので、URLをお教えする事が難しいです。

表現の仕方は何通りかあるとの事ですが、お手数でなければお教えいただけないでしょうか？

よろしくお願いいたします。

[退会済みユーザー]

上に上げた疑似要素を使う方法が１つ。
liにpaddingを効かせて領域を広げて下部にのみ枠線を付け、内側の要素をliより小さくする方法が1つ。
liとliの間に適当な要素を挟み込んで枠線を当てる方法が1つ。
ぱっと思いつくのはこの辺りでしょうか。

画像に疑似要素のCSSを載せていますので、
teratailで同じ場所を探して再現してみていただけると非常に助かります。
早く風呂に入らないと離婚届けにハンコを押されるかもしれないのでっ

[missy]

ご回答ありがとうございます。

heightの数をpaddingしたい分だけ広げて、下部のみボーダーを入れて対応する事にしました。

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