はじめてのWebデザイン『HTML・CSS』入門

3-9. 要素に余白を空ける(margin・padding)

文書や画像には情報のまとまりをわかりやすくするため「余白」が欠かせません。CSSでは要素の周りに対して余白をつくる「margin」と、要素の内側に対して余白をつくる「padding」というCSSプロパティが用意されています。

  • HTML・CSS
  • Webデザイン

公開日:2019/06/21最終更新日:2019/06/21

スポンサーリンク

1.要素に余白をつける「margin」と「padding」の違い

CSSで余白を表現するプロパティは2種類あり、「margin」が外側の余白、「padding」が内側の余白を指定します。

試しに以下のHTMLとCSSに余白をつけてみましょう。

サンプルHTML:

<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>CSSの記述場所と文法について</h1>
    <p>これまでのレッスンでは文書全体の構造をHTMLを使ってマークアップしてきました。続いてCSSを使って、文章のレイアウトを整えたり装飾を加えていきます。まずはCSSを記述するファイルを作成し、文法について知りましょう。</p>
  </body>
</html>

サンプルCSS:

h1{
  background: skyblue;
}
p{
  background: lightgreen;
}

margin(外側の余白)

まずはh1タグにmarginを20pxに設定してみます。

サンプルCSS:

h1{
  background: skyblue;
  margin: 20px;
}
p{
  background: lightgreen;
}

上下左右に余白が生まれて、くっついていた要素が離れました。

padding(内側の余白)

h1タグにpaddingを20pxに設定してみます。

サンプルCSS:

h1{
  background: skyblue;
  padding: 20px;
}
p{
  background: lightgreen;
}

文字のまわりに余白ができました。要素と要素の間に隙間はできません。

2.margin : autoで中央に寄せる

要素の横幅が指定されているとき、要素自体を中央に寄せたいということがあったとします。

その際はmarginautoの値にすると、中央に寄せることができます。

サンプルHTML:

<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>中央に寄せる</h1>
  </body>
</html>

サンプルCSS:

h1{
  background: skyblue;
  width: 240px;
  margin: auto;
}

3.上下左右バラバラに値を指定する

marginとpaddingは上下左右それぞれに値を指定することができます。

marginの場合

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

paddingの場合

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

そしてこれは略して記述することができます。

 

例えば2つの値をスペースで区切って指定すると、上下と左右それぞれの余白が指定できます。

margin: 30px 60px;

30pxが上下、60pxが左右の余白になります。

 

3つの値をスペースで区切って指定すると、上・左右・下それぞれの余白が指定できます。

margin: 10px 30px 40px;

30pxが上、30pxが左右、40pxが下の余白になります。

 

4つの値をスペースで区切って指定すると、上・右・下・左それぞれの余白が指定できます。

margin: 10px 20px 30px 40px;

10pxが上、20pxが右、30pxが下、40pxが左の余白になります。

 

paddingも同様の指定ができます。

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

スポンサーリンク

このレッスンの著者