こんにちは、現在独学でHTML/CSSを者です。
下記、画像にある日付(赤枠)をbox内の下側(水色箇所)に表示させたいのですが、なかなかうまくできません。
margin-bottomやpadding-bottomを使ってみても、一向に下側に表示がされないのです。
一体どこを修正すれば、下側らへんで表示されるようになるのでしょうか?
HTML
1<div class="container_flex"> 2 <ul> 3 <li class="challenge_lists"> 4 <a href="#"> 5 <dl> 6 <dt class="challenge_img"> 7 <img src="./images/brooke-cagle-g1Kr4Ozfoac-unsplash (1).png" alt="イベント参加"> 8 </dt> 9 <dd>もくもく会in大阪のコーディング<br> 10 イベントに参加してきました!!</dd> 11 </dl> 12 13 </a> 14 <time datetime="2020.06.28">2020.06.28</time> 15 </li> 16 </ul> 17</div>
CSS
1div.container_flex ul li { 2 border: 1px solid lightgray; 3 border-style: outset; 4 margin-right: 25px; 5 margin-bottom: 46px; 6 box-shadow: 2px 2px 4px lightgray; 7 height: 336px; 8 padding-bottom: 20px; 9} 10 11li.challenge_lists dd { 12 font-size: 18px; 13 font-weight: bold; 14 line-height: 1.5; 15 margin-top: 19px; 16 padding-left: 20px; 17} 18 19li.challenge_lists time { 20 font-size: 16px; 21 margin-left: 20px; 22 margin-bottom: 20px; 23 border: 2px solid red; 24 25}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。