LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

かんたんCSS margin,padding 余白の設定とボーダーとの関係

css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

HTMLのコンテンツに余白を入れる方法です。作業はすべてCSSで行います。

余白は2種類あり役割が違います。それが分かると、余白はとてもかんたんです。

また、ボーダー(枠線)と関係しています。それも合わせてソースコードのサンプルで誰でも分かるように説明します。

余白はmarginpaddingで、ちがいはborder(枠線)を基準にして

margin外に余白をつくる
padding内に余白をつくる

だけです。それだけです。かんたんですね? くわしい内容をそれぞれ見ていきましょう。

margin - 枠の外の余白

marginはコンテンツの枠の外に余白をつくります。上下左右で隣り合うほかのコンテンツとの距離を決めます。

まずはmargin未指定(デフォルト)から。HTMLとCSSのサンプルです。

ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

HTML
<div class="content content-a">コンテンツA</div>
<div class="content content-b">コンテンツB</div>
<div class="content content-c">コンテンツC</div>
CSS
.content {
  color: #fff;
  text-align: center;
  max-width: 500px;
  min-height: 100px;
  border: 3px solid #e4ad6d;
}
.content-a {
  background: #7fc2ef;
}
.content-b {
  background: #d685b0;
}
.content-c {
  background: #dbe159;
}

borderで枠線を見やすくしました。HTMLの結果です。

コンテンツA
コンテンツB
コンテンツC

デフォルトはマージンなしなので、コンテンツがつながります。

次はコンテンツBにmarginを指定しましょう。CSSを追加してHTMLを変更します。

追加CSS
.set-margin {
  margin: 50px;
}
HTML
<div class="content content-a">コンテンツA</div>
<div class="content content-b set-margin">コンテンツB</div>
<div class="content content-c">コンテンツC</div>

classのset-marginでマージンを設定し、htmlでコンテンツBのクラスに追加します。

マージンは上下左右50pxです。HTMLの結果です。

コンテンツA
コンテンツB
コンテンツC

上下左右でボーダーの外に余白ができました。

マージンは個別にも指定できます。

1つ1つサンプルをつくるのが面倒なので一気に見ます。CSSを追加してHTMLを変更します。

追加CSS
.set-margin-top {
  margin-top: 50px;
}
.set-margin-bottom {
  margin-bottom: 50px;
}
.set-margin-left {
  margin-left: 50px;
}
.set-margin-right {
  margin-right: 50px;
}
HTML
<div class="content content-a">コンテンツA</div>
<div class="content content-b set-margin-top">マージン上</div>
<div class="content content-c set-margin-bottom">マージン下</div>
<div class="content content-a set-margin-left">マージン左</div>
<div class="content content-b set-margin-right">マージン右</div>
<div class="content content-c">コンテンツC</div>

HTMLの結果です。

コンテンツA
マージン上
マージン下
マージン左
マージン右
コンテンツC

マージンは重なり合う。サイズが大きくなっても慌てない

マージンは隣接するコンテンツのマージンと重なり合います。このとき、コンテンツ間のマージンは大きいほうが優先されます。

サンプルを見ましょう。CSSを追加してHTMLを変更します。

追加CSS
.set-margin-top2 {
  margin-top: 10px;
}
.set-margin-bottom2 {
  margin-bottom: 70px;
}
HTML
<div class="content content-a set-margin-bottom2">マージン下(大)</div>
<div class="content content-b set-margin-top2">マージン上(小)</div>

HTMLの結果です。

マージン下(大)
マージン上(小)

マージンは大きいほうに合わせて表示されます。

padding - 枠の中の余白

次はボーダーの中の余白です。サンプルを見てみましょう。

CSSはこれまでのをそのまま使いHTMLを変更します。

HTML
コンテンツA
<div class="content content-a">
  <div class="content content-b">コンテンツB</div>
</div>

内側の余白を見たいので、コンテンツBをAの中に入れました。まずは未設定を見ます。

『コンテンツA』という文字列もコンテンツになります。便宜上、外に出しました。

コンテンツA
コンテンツB

コンテンツAは全く見えずコンテンツBが覆いかぶさっています。

ここでコンテンツAにpaddingを指定しましょう。CSSを追加してHTMLを変更します。

追加CSS
.set-padding {
  padding: 20px;
}
HTML
コンテンツA
<div class="content content-a set-padding">
  <div class="content content-b">コンテンツB</div>
</div>

classのset-paddingでパディングを設定し、htmlでコンテンツAのクラスに追加します。

パディングは左右上下20pxです。HTMLの結果です。

コンテンツA
コンテンツB

コンテンツBはA内のpaddingより広がりません。コンテンツAとBのborderの間に余白ができます。

パディングも個別に指定できます。サンプルで一気に見ます。CSSを追加してHTMLを変更します。

追加CSS
.set-padding-top {
  padding-top: 20px;
}
.set-padding-bottom {
  padding-bottom: 20px;
}
.set-padding-left {
  padding-left: 20px;
}
.set-padding-right {
  padding-right: 20px;
}
HTML
<div class="content content-a set-padding-top">
  <div class="content content-b" >パディング上</div>
</div>
<div class="content content-c set-padding-bottom">
  <div class="content content-b" >パディング下</div>
</div>
<div class="content content-a set-padding-left">
  <div class="content content-b" >パディング左</div>
</div>
<div class="content content-c set-padding-right">
  <div class="content content-b" >パディング右</div>
</div>

HTMLの結果です。

パディング上
パディング下
パディング左
パディング右

まとめて指定する方法

今まで、『margin: ??px;』『padding: ??px;』というようにまとめて指定する方法を使ってきました。

このまとめて指定する方法はいくつかあります。

指定数指定ルール
1[上下左右]
2[上下] [左右]
3[上] [左右] [下]
4[上] [右] [下] [左]

複数個指定する場合は半角スペースで区切ります。

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください