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

他言語サイト
翻訳はみつかりませんでした
CSS ロゴ

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

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

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

余白は2つのタイプがあります。marginpaddingです。この2つの違いは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は、marginのものをそのまま使って、HTMLを変更します。

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

HTMLは、ボーダーの中の余白を見たいので、コンテンツAの中にコンテンツBを入れました。このHTMLの余白が未設定の状態を見ます。

(『コンテンツ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

コンテンツAの内部に余白ができたことで、コンテンツBはその余白の中に収まります。そして、余白にはコンテンツAの一部が表示されます。

パディングも個別に指定することができます。

1つ1つサンプルをつくるのが面倒なので一気に見ます。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[上] [右] [下] [左]

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

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

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

この記事を気に入ったらぜひシェアも!!