演習課題「マージンを設定してみよう」
現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。また、六村リオにはrokumuraクラスが設定されています。
ここで、marginプロパティを用いて、rokumuraクラスのマージンを50pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃02:マージン(margin)
このチャプターでは、マージン(margin)を学習します。
マージンとは、ボックスモデルの一番外側に挿入される余白のことを指します。
マージンは要素の周りに追加の領域を作成しているので、背景色 (background-color) が適用されません。
マージンを適用・調整したい場合は、marginプロパティを使用することで余白のサイズを調整することができます。
また複数のボックスを並べると、上下のマージンの相殺が行われます。
なおこの相殺は、ボーダーやパディング、左右マージンでは行われません。
@charset "UTF-8";
p {background-color: aqua;}
.margin_box {
margin: 40px;
background-color: yellow;
}