レイアウト関係の指定方法

marginプロパティで要素のマージンを指定することができます。マージンというのは、要素と要素の余白のことです。値には、単位のどれかを指定できます。

marginプロパティは、上右下左の順番で記述します。この場合は４つ値を指定しますが、これは省略することもでき、１つだけだと上右下左すべてがその値になります。

<div style="margin : 2px 3px 2px 3px">マージンを指定してます。</div>
<div style="margin : 5px">マージンを指定してます。（省略）</div>

このほかにも、各方向だけを指定することもできます。上は、margin-top右はmargin-right下はmargin-bottom左はmargin-leftで、それぞれ指定することができます。

<div style="margin-top : 10px">上マージンを指定してます。</div>
<div style="margin-right : 10px">右マージンを指定してます。</div>
<div style="margin-bottom : 10px">下マージンを指定してます。</div>
<div style="margin-left : 10px">左マージンを指定してます。</div>

上マージンを指定してます。

右マージンを指定してます。

下マージンを指定してます。

左マージンを指定してます。

paddingプロパティで、要素の内側の余白を指定することができます。このプロパティもmarginプロパティと同じ方法で指定できます。

<div style="padding : 2px 3px 2px 3px">
パディングを指定してます。</div>
<div style="padding : 5px">パディングを指定してます。（省略）</div>
<div style="padding-top : 10px">上パディングを指定してます。</div>
<div style="padding-right : 10px">右パディングを指定してます。</div>
<div style="padding-bottom : 10px">
下パディングを指定してます。</div>
<div style="padding-left : 10px">左パディングを指定してます。</div>

パディングを指定してます。

パディングを指定してます。（省略）

上パディングを指定してます。

右パディングを指定してます。

下パディングを指定してます。

左パディングを指定してます。

borderプロパティで要素に枠線を表示することができます。このプロパティの値は、幅、スタイル、色の順で値を指定します。

幅は単位付きの値、スタイルはnone solid double dashed
dotted groove ridge inset outsetのどれかを指定し、色は前に説明した指定方法で指定します。枠のスタイルがどのように表示されるかは下の表示結果に表示されています。

<div style="border : 10px none red">スタイルの値はnone</div>
<div style="border : 10px solid red">スタイルの値はsolid</div>
<div style="border : 10px double red">スタイルの値はdouble</div>
<div style="border : 10px dashed red">スタイルの値はdashed</div>
<div style="border : 10px dotted red">スタイルの値はdotted</div>
<div style="border : 10px groove red">スタイルの値はgroove</div>
<div style="border : 10px ridge red">スタイルの値はridge</div>
<div style="border : 10px inset red">スタイルの値はinset</div>
<div style="border : 10px outset red">スタイルの値はoutset</div>

スタイルの値はnone

スタイルの値はsolid

スタイルの値はdouble

スタイルの値はdashed

スタイルの値はdotted

スタイルの値はgroove

スタイルの値はridge

スタイルの値はinset

スタイルの値はoutset

幅の指定にはwidthプロパティ、高さはheightプロパティでそれぞれ指定できます。わかりやすいように枠を付けてみます。