Home

ホーム>>応用

間隔をあける

間隔をあけるスタイルは【margin】と【padding】二つあります。どちらも何の装飾をしなければ見え方は同じですが、枠線などを付けると【margin】と【padding】では表示が異なります。

marginとpaddingの違い

marginとpaddingの大きな違いは間隔の基準です。

margin

marginは、marginを指定したhtml要素と他の要素との間隔を決めるスタイルです。下の例のようにmarginを指定したhtml要素は、指定方向に任意の数値だけ他の要素と間隔を取ります。

下に20pxのmarginを指定

サンプルサンプルサンプル

padding

paddingは、paddingを指定したhtml要素内での間隔を決めるスタイルです。下の例のようにpaddingを指定したhtml要素は、要素内で指定方向に任意の数値だけ間隔を取ります。

下に20pxのpaddingを指定

サンプルサンプルサンプル

marginとpaddingの記述方法

【style=""】内に【margin:指定方向への間隔】もしくは【padding:指定方向への間隔】を記述すると、指定方向に対して任意の間隔を取ります。

<p style="margin:20px;">コンテンツ</p>
全方向に20pxのmargin

一括指定

【margin(padding):0(上下左右)】
上記のように記述すると、全方向共通で任意の間隔を取る事が出来ます。例えば【margin:10px】と記述すると、上下左右に10pxの間隔を取ります。
【margin(padding):0(上) 0(右) 0(下) 0(左)】
上記のように記述すると、一括で全方向に任意の間隔を取る事が出来ます。例えば【margin:10px 15px 20px 25px】と記述すると、上に10px、右に15px、下に20px、左に25pxの間隔を取ります。
【margin(padding):0(上下) 0(左右)】
上記のように記述すると、上と下、左と右に共通の間隔を取る事が出来ます。例えば【margin:10px 20px】と記述すると、上下に10px、左右に20pxの間隔を取ります。
【margin(padding):0(上) 0(左右) 0(下)】
上記のように記述すると、上と下が別々で、左と右に共通の間隔を取る事が出来ます。例えば【margin:10px 20px 15px】と記述すると、上に10px、下に15px、左右に20pxの間隔を取ります。

個別指定

個別に間隔を指定する場合、margin(padding)の後ろに【-指定方向】を記述して【margin-指定方向:間隔】とすると任意の方向に間隔を取ります。

<p style="margin-left:10px;">コンテンツ</p>
左方向に10pxのmargin

指定方向は【top】【right】【bottom】【left】の四つで、【top = 上】【right = 右】【bottom = 下】【left = 左】となります。

【線を引く】へ>>

当サイトは初めてWebサイトを作る方向けの解説サイトです。文法は抜きにして"とにかく作って出す"という事を前提に解説しています。

一度作成してみてさらに興味がわいた方は、専門の参考書を読む事をおススメします。

はじめに - Webサイトについて -

1:予め用意するもの
テキストエディタ
画像編集ソフト
2:最低限の知識
拡張子の表示
htmlタグとは
覚えるべき要素
htmlファイルの構成
htmlファイルの保存
htmlファイルの確認
Webサイトの構造とindex.html
相対パス/絶対パス
3:作成手順
【1】保存フォルダの作成
【2】htmlファイルの作成
【3】ファイルを送信
【4】完成
応用
デザインの変え方
背景色・文字色を変える
文字サイズを変える
縦横のサイズを指定する
行揃えの位置を指定する
間隔をあける
線を引く