スポンサーサイト

--年--月--日 - カテゴリ:スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



【CSS】margin, padding 等の値の指定の方法

2016年09月16日 - カテゴリ:ウェブサイト構築(HTML、CSS)
margin(マージン)やpadding(パディング)は、要素の余白を設定するプロパティだ。

余白のサイズは、margin: もしくは padding: の後に指定するが、値の並びによって、余白の方向が違う。以下、説明する。

①margin: 10px;

上の例のように、値を1つだけしか指定しなければ、その値は全ての方向、つまり「上下左右」の余白として設定される。つまり、この場合は、「上下左右に 10px の余白を作る」、ということになる。

②margin: 10px 20px;

上の例の場合、値を2つ指定している。この場合は、「上下」方向に 10px、「左右」方向に 20px の余白を作るという設定になる。

③margin: 10px 20px 30px;

一番分かり難いのがこの3つの値を設定する例だ。この場合、「上」方向に 10px、「左右」方向に 20px、そして「下」方向に 30px の余白を作るという設定になる。「左右」が一まとめに認識されるわけだ。

④margin: 10px 20px 30px 40px;

最後に、4つの方向全て指定する例である。この場合、「上」方向に 10px、「右」方向に 20px、「下」方向に 30px、そして「左」方向に 40px の余白を指定することになる。数字だけが並べられているため、順番が分かりづらいが、「時計回りの順番」と覚えておけばよいと思う。

なお、上記のように、全ての方向について余白を指定するのではなく、個別に指定する方法もある。

margin-top:
margin-bottom:
margin-left:
margin-right:

padding-top:
padding-bottom:
padding-left:
padding-right:

このように、margin もしくは padding の後に、-top, -bottom, -left, -right を付け加えると、それぞれ「上」、「下」、「左」、「右」方向の余白を指定することができるのだ。




上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。