ログイン

問題40 要素の幅と高さを変えずにpaddingを入れよう

HTML_CSSの問題

HTML_CSS

今回登場するプロパティは、頻繁に使用するので必ず覚えておきましょう! Webサイトを作る際に最初に行う初期設定のようなものです。

要素の幅と高さを変えずにpaddingを入れよう

問題

要素の幅と高さを変更せず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;}を付与する場合が多いかなと思います。
*をセレクタとすることで、全ての要素に適用することができます。
ログインして解答を見る
重要なプロパティなので、更に具体的に解説していきます。
box-sizingは要素の幅と高さにpaddingとborderを含めるかどうかを指定するためのプロパティです。

デフォルトだとcontent-box(paddingとborderを含まない)が設定されているため、要素の幅を100%で設定した時などにpaddingとborder分だけ外にはみ出してしまいます。なので今回のように値をborder-box((paddingとborderを含む)に設定します。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!