忍者CODE

ログイン

40
要素の幅と高さを変更せずpaddingを入れよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
要素の幅と高さを変更せずpaddingを入れよう!

.boxにpadding:50pxを付与しましょう。
付与後も、幅200px,高さ200pxは変更せず実装しよう。
見本画像を参考にしてCSSに記述し実装してください。
自分の環境に書くコード
            <div class="box">要素の幅と高さは変わりません</div>
¥HTML¥
          
            .box {
    height:200px;
    width:200px;
    background:black;
    color:white;
    font-size:20px;
}
¥CSS¥
          
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <div class="box">要素の幅と高さは変わりません</div>
¥HTML¥
          
            .box {
    height:200px;
    width:200px;
    background:black;
    color:white;
    font-size:20px;
    padding:50px;
    box-sizing:border-box;
}
¥CSS¥
          
答えのアイコン

解説

幅、高さを変更せずpaddingで要素内に空白を付与したい場合
box-sizing:border-box;を付与します。

サイト制作の際は
*{box-sizing:border-box;}を付与する場合が多いかなと思います。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET