padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(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;
  /* 問題1. 内側の余白を指定①【左側】 */
  /* この下に解答してください */
  padding-left: 40px;
  /* 問題2. 内側の余白を指定②【右側】 */
  /* この下に解答してください */
  padding-right: 40px;
}

p {
  background-color: #fff5d3;
  width: 300px;
  text-align: center;
  /* 問題3. 内側の余白を指定③【上下左右】 */
  /* この下に解答してください */
  padding: 10px 20px;
}


* {
  margin: 0;
  padding: 0;
}

h1 {
  background-color: #fff2f2;
  border: 2px solid #000;
  width: 220px;
  text-align: center;
  /* 問題1. 内側の余白を指定①【左側】 */
  /* この下に解答してください */

  /* 問題2. 内側の余白を指定②【右側】 */
  /* この下に解答してください */
}

p {
  background-color: #fff5d3;
  width: 300px;
  text-align: center;
  /* 問題3. 内側の余白を指定③【上下左右】 */
  /* この下に解答してください */
}


内側の余白

CSSとは

color

font-size

文字の色と大きさ

font-weight

text-align

文字の太さと配置

background-color

border

背景色と枠線

width

height

横幅と高さ

margin

margin: 10px 20px 30px 40px;

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

ショートハンド

外側の余白

<ul>

<li>

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

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

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

Web制作コース

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

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