HTML STUDY
>
>

CSSで余白を設定する

ここではCSSでコンテンツの余白を設定していく方法を解説していきます。内側の余白にはpadding、外側の余白にはmarginを指定します、また入力する値の数によって部分的に余白を設定することも可能です。

内側の余白

内側の余白はpaddingを指定します。内側の余白とは、基準となる枠線から内側に向いている余白をいいます。入力する値としてpx値、パーセントなどがあります。パーセントを入力した場合はそのボックスを含む相対的な余白となります。

余白の説明画像

paddingに入力する値を複数指定することで部分的に余白を設定することができます。値が１つの場合は上下左右、２つの場合は上下と左右、３つの場合は上と左右、下、４つの場合は上、右、下、左のように設定できます。図で説明すると以下のようになります。

例 padding: 1px 2px 3px 4px;

余白の説明画像

また部分的に余白を設定する方法としてpaddin-にtop,right,bottom,leftの方向を指定したCSSで設定することもできます。

例 padding-top: 10px;

要素解説
<div>コンテンツをグループ化
CSSプロパティ解説
padding内側の余白
padding-top内側の上の余白
padding-right内側の右の余白
padding-bottom内側の下の余白
padding-left内側の左の余白
border枠線
display要素のブロック形式を設定します。今回はpaddingが反映されているか見やすいようにinline-blockの値を入力しています。

HTMLコード記述例

<p class="sample1">内側の余白を10pxに設定しています。</p>
<p class="sample2">内側の余白を上10px右20px下30px左40pxに設定しています。</p>

外部ファイルCSS記述例

@charset "utf-8";

p.padding1 {
 border: 2px dotted red;
 padding: 10px;
 display: inline-block;
}

p.padding2 {
 border: 2px dotted red;
 padding: 10px 20px 30px 40px;
 display: inline-block;
}

ブラウザ表示例

内側の余白を10pxに設定しています。

内側の余白を上10px右20px下30px左40pxに設定しています。

外側の余白

marginは外側の余白を設定する際に使用します。paddingと同様に基準となる枠線から余白を作り、入力する値の数によって部分的に設定が可能です。あるいはmargin-のあとにtop,right,bottom,leftを指定することによっても上下左右の余白をそれぞれ設定することも可能です。

CSSプロパティ解説
margin外側の余白
margin-top外側の上の余白
margin-right外側の右の余白
margin-bottom外側の下の余白
margin-left外側の左の余白
width横幅

marginに入力する値として他にautoがあります。autoは左右に使用するとセンタリングとなり、上下に使用すると0となります。

例 margin: 0 auto;

今回の表示例では外側の余白がわかりやすいように横幅を200px固定としてあります。

HTMLコード記述例

<div class="sample3">
<p>上下に10px、左右に30px外側の余白を設定</p>
</div>

<div class="sample4">
<p>上下を0、左右にautoの値を入力すると。</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.margin1 {
 border: 2px dotted blue;
 width: 200px;
 margin: 10px 30px;
}

div.margin2 {
 border: 2px dotted blue;
 width: 200px;
 margin: 0 auto;
}

ブラウザ表示例

上下に10px、左右に30px外側の余白を設定

上下を0、左右にautoの値を入力すると。

CSSボックス 関連記事