演習課題「パディングを指定してみよう」
現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここで、paddingプロパティを用いて、article要素のパディングを30pxに設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「上下左右のパディングを個別に指定してみよう」
現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここでpadding-topプロパティやpadding-rightプロパティ、padding-bottomプロパティ、padding-leftプロパティを用いて、article要素の上のパディングを30px、右のパディングを20px、下のパディングを10px、左のパディングを40pxに設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃05:パディング(padding)
このチャプターでは、パディングを学習します。
パディングとは、ボーダーとコンテンツ間に挿入される余白のことを指します。
画面上で要素が占める領域はパディングとボーダーによって定められるため、その点ではマージンと似ていますが、マージンは他要素とのレイアウトを定めるための領域です。
それに対してパディングは、コンテンツのレイアウトを定めるための領域なので、背景色(background-color) が適用されます。
@charset "UTF-8";
article {
margin: 40px;
border: solid 5px red;
padding: 40px;
background-color: yellow;
}
@charset "UTF-8";
article {
margin: 40px;
border: solid 5px red;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 60px;
background-color: yellow;
}