2018.05.30

9. 余白・ボーダーを作る padding・margin・border

目次

ボックスモデル

HTMLの多くの要素には余白やボーダーを付けることができ、その様子は下の図のようになっています。

一番内側にwidthとheightで指定されるコンテンツの領域があり、その外側には、内側の余白であるpadding、文字通り線を表すborder、外側の余白であるmarginが続きます。

padding・marginの書き方

下の画像のように、paddingは上下左右別々に指定できます。上から順に、上の余白、右の余白、下の余白、左の余白です。

また、padding-〇〇とせずに、paddingプロパティで一気に指定することもできます。

値を1つ指定した場合は、上下左右のpadding全てが同じ値になります。
値を2つ指定した場合は、1つ目の値が上下のpadding、2つ目の値が左右のpaddingにあたります。
値を4つ指定した場合は、左から順に、top・right・bottom・leftの値になります。

また、marginの書き方はpaddingと同じなので、「padding」の部分を「margin」に変えればOKです。

borderの書き方

borderには太さ・種類・色のそれぞれを指定するプロパティがありますが、一括してborderプロパティで指定してしまったほうが楽です。

〇pxはボーダーの太さ、solidはボーダーの種類、blackはボーダーの色と対応しています。また、これらの値は順不同なので、好きな順番で記述してOKです。

ボーダーの種類

ボーダーの種類はいくつかありますが、比較的よく使うものを紹介しておきます。

solidは実線、doubleは二重線、dottedは点線、dashedは破線です。

上下左右のボーダー

borderはpaddingやmarginと同じように、方向を指定して上下左右の一部にだけ指定することもできます。
書き方は以下の通りで、border-〇〇のように方向を指定するだけでOKです。


(注)インライン要素のpadding・margin

aタグなどのインライン要素には、paddingとmarginは左右にしか指定できず、上下に指定してもうまく機能してくれません。paddingやmarginを指定できるようにするには、displayプロパティの値をblockかinline-blockにする必要があります。

home

scroll