margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

<h1>

<h1>CodeLesson</h1>

<p>実践的コーディング学習をはじめよう</p>


* {
  margin: 0;
  padding: 0;
}

h1 {
  background-color: #fff2f2;
  border: 2px solid #000;
  width: 220px;
  text-align: center;
  padding-left: 40px;
  padding-right: 40px;
  /* 問題1. <h1>タグの外側に、上20pxの余白を指定してください */
  /* この下に解答してください */
  margin-top: 20px;
  /* 問題2. <h1>タグの外側に、左20pxの余白を指定してください */
  /* この下に解答してください */
  margin-left: 20px;
}

p {
  background-color: #fff5d3;
  width: 300px;
  text-align: center;
  padding: 10px 20px;
  /* 問題3. <p>タグの外側に、上20px・左20pxの余白をまとめて指定してください */
  /* この下に解答してください */
  margin: 20px 0 0 20px;
}


* {
  margin: 0;
  padding: 0;
}

h1 {
  background-color: #fff2f2;
  border: 2px solid #000;
  width: 220px;
  text-align: center;
  padding-left: 40px;
  padding-right: 40px;
  /* 問題1. <h1>タグの外側に、上20pxの余白を指定してください */
  /* この下に解答してください */

  /* 問題2. <h1>タグの外側に、左20pxの余白を指定してください */
  /* この下に解答してください */
}

p {
  background-color: #fff5d3;
  width: 300px;
  text-align: center;
  padding: 10px 20px;
  /* 問題3. <p>タグの外側に、上20px・左20pxの余白をまとめて指定してください */
  /* この下に解答してください */
}


外側の余白

color

font-size

文字の色と大きさ

font-weight

text-align

文字の太さと配置

background-color

border

背景色と枠線

width

height

横幅と高さ

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

内側の余白

<ul>

<li>

間隔を空けてボックスを並べよう（演習問題）

ウェブページに美しいスタイルを加えるためのCSSの書き方を練習します。
テキストのスタイルから背景色の設定まで、基礎的なスタイリングを習得します。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【まずはここから🔰】ゼロから始めるWeb制作

「まずはここから！CSSを体験してみよう」レッスンの総復習クイズです。