CSS

CSSで余白を調整しよう！margin・padding・borderの基本と使い方

Webサイトを作るとき、文字やボタン、画像などの間隔を適切に調整することはとても大切です。

例えば、文字が詰まりすぎていると読みにくくなり、ボタンの間隔が狭すぎると押しにくくなることがあります。

CSSには、要素の余白を調整するためのプロパティとして、以下のものがあります。

  • margin（外側の余白）
  • padding（内側の余白）
  • border（枠線）
  • width（横幅）・height（高さ）

この記事では、それぞれのプロパティがどのように動作するのか、実際に試しながら学んでいきましょう！

実際に試してみよう！

次のHTMLとCSSを使って、margin・padding・border・width・height の関係を視覚的に確認できます。

HTMLファイル（index.html）

このHTMLでは、ボックスを作成し、余白やサイズを調整できるようになっています。

「ボックスの大きさや余白を変えたらどのように表示が変わるのか？」を試しながら学んでみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSの余白とサイズの関係</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSの余白を理解しよう！</h1>
    <div class="box">このボックスの余白やサイズを変更してみよう！</div>
</body>
</html>

CSSファイル（style.css）

以下のCSSを保存し、値を変えながら試してみてください。

.box {
    width: 200px; /* ボックスの横幅 */
    height: 100px; /* ボックスの高さ */
    margin: 20px; /* ボックスの外側の余白 */
    padding: 10px; /* ボックスの内側の余白 */
    border: 5px solid black; /* 枠線 */
    background-color: lightblue;
}

どの部分を変更すれば何が変わる？

  • margin: 値を大きくすると、ボックスの周りの空白が広がる
  • padding: 値を大きくすると、ボックス内のテキストと枠線の間が広がる
  • border: 枠線の太さや色を変えてデザインを調整できる
  • width・height: ボックスの大きさそのものを調整できる

いろいろな値を試してみよう！

例えば、次のような値に変更して試してみましょう。

  • margin: 50px; → ボックスの周りの余白を広げる
  • padding: 30px; → テキストと枠線の間隔を広げる
  • border: 10px solid red; → 枠線を太くして色を赤に変更
  • width: 300px; → ボックスの横幅を広げる
  • height: 150px; → ボックスの高さを広げる

それぞれのプロパティを詳しく学ぼう

margin（外側の余白）

margin は、要素の外側の空白を作るプロパティです。

ボックスの周囲に余白を作ることで、要素同士の間隔を調整できます。

次のCSSを適用すると、ボックスの周りに50pxの余白ができます。

試してみよう！

先ほどのHTMLとCSSに下記を追加し、margin の値を変更して余白の変化を確認してください。

<div class="margin-example">このボックスの周囲の余白を変えてみよう！</div>
.margin-example {
    width: 200px;
    height: 100px;
    margin: 50px;
    background-color: lightcoral;
}
  • margin: 10px; → 余白を狭くする
  • margin: 100px; → 余白を広くする

padding（内側の余白）

padding は、要素の内側の余白を指定するプロパティです。

ボックスの枠線と中のテキストの間隔を調整できます。

試してみよう！

先ほどのHTMLとCSSに下記を追加し、padding の値を変更して、ボックス内の余白がどう変わるか試してみましょう。

<div class="padding-example">このボックスの内側の余白を変えてみよう！</div>
.padding-example {
    width: 200px;
    height: 100px;
    padding: 30px;
    background-color: lightgreen;
}
  • padding: 10px; → 余白を狭くする
  • padding: 50px; → 余白を広くする

border（枠線）

border は、要素の枠線を指定するプロパティです。

枠線の太さ・色・スタイルを自由に調整できます。

試してみよう！

先ほどのHTMLとCSSに下記を追加し、border の設定を変更して、枠線のデザインを試してみましょう。

<div class="border-example">このボックスの枠線を変えてみよう！</div>
.border-example {
    width: 200px;
    height: 100px;
    border: 5px solid blue;
    background-color: white;
}
  • border: 2px dashed red; → 赤の破線の枠線にする
  • border: 8px double black; → 黒の二重線の枠線にする

    問題集

    Q1. 要素の内側の余白を調整するプロパティは？

    1. margin
    2. padding
    3. border

    Q2. 要素の外側の余白を調整するプロパティは？

    1. padding
    2. border
    3. margin

    ✅ 答え: Q1→2, Q2→3

    まとめ

    • margin は要素の外側の余白を作る
    • padding は要素の内側の余白を作る
    • border は枠線を設定する
    • width と height で要素のサイズを調整する
    • 実際に値を変えて、どのように表示が変わるか試してみよう！

    シェア！

    コメントを残す

    メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

    RECOMMENDこちらの記事も人気です。