HTML_CSS
Googleでログイン
問題40：要素の幅と高さを変えずにpaddingを入れよう
要素の幅と高さを変更せずpaddingを入れましょう!
.boxにpadding:50pxを付与しましょう。
付与後も、幅200px,高さ200pxは変更せずに実施しましょう。
見本画像を参考にしてCSSに記述し実装してください。
.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¥
補足
重要なプロパティなので、更に具体的に解説していきます。
box-sizingは要素の幅と高さにpaddingとborderを含めるかどうかを指定するためのプロパティです。
デフォルトだとcontent-box(paddingとborderを含まない)が設定されているため、要素の幅を100%で設定した時などにpaddingとborder分だけ外にはみ出してしまいます。なので今回のように値をborder-box((paddingとborderを含む)に設定します。
box-sizingは要素の幅と高さにpaddingとborderを含めるかどうかを指定するためのプロパティです。
デフォルトだとcontent-box(paddingとborderを含まない)が設定されているため、要素の幅を100%で設定した時などにpaddingとborder分だけ外にはみ出してしまいます。なので今回のように値をborder-box((paddingとborderを含む)に設定します。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
box-sizing:border-box;を付与します。
サイト制作の際は
*{box-sizing:border-box;}を付与する場合が多いかなと思います。
*をセレクタとすることで、全ての要素に適用することができます。