CSS: "border" と "width" の関係

スタイルシートでデザインを考えているときに、疑問に思うことの1つに、"border" と "width" をどのように指定すればよいか迷うことがある。"border" は内側なのか外側なのかという疑問である。ここでは、実例を挙げて、"border" がどのように表示されるのかメモっておく。

設定例1

まずは、"width" を指定して、"border" を指定してみる。以下は、サンプルコードである。

<div style="border:1px solid red;width:300px;">
あいうえお
</div>

<div style="border:10px solid red;width:300px;">
あいうえお
</div>

実際に表示してみると、以下のようになる。

あいうえお

あいうえお

つまり、"width" を指定した場合には、ボーダーは外側に引かれることになる。

設定例2

次に、いったん "width" を指定して、その中で "width" を指定せずに "border" を指定してみる。以下は、サンプルコードである。

<div style="width:300px;">

<div style="border:1px solid red;">
あいうえお
</div>

<div style="border:10px solid red;">
あいうえお
</div>

</div>

実際に表示してみると、以下のようになる。

あいうえお

あいうえお

つまり、"width" を指定しない場合には、ボーダーは内側に引かれることになる。

メモ

"width" と "border" を同時に指定すると、デザインが崩れてしまう可能性があるので、まず、<div>タグで "width" を指定したあと、その中の<div>タグなどで "border" を使うことが望ましい。

トラックバック(0)

このブログ記事に対するトラックバックURL: http://itsmemo.com/mt/mt-tb.cgi/16

※スパム防止のため、管理人がトラックバック内容確認後、公開されます。

コメント(2)

fuku :

こんにちは。

この説明ですがちょっと疑問が残ります。
2番目の方は内側のdiv要素のwidthがデフォルトのautoになっているため自動的に幅が調整されているだけだと思います。つまり上はborder:10px solid red;width:298px;と同じで下はborder:10px solid red;width:280px;と同じ。

管理人 :

> fuku

コメントありがとうございます。
ご指摘の通りです。
ただ、Webページのデザインを設計する際に、border を気にして、widthの値をどうするかを決めるのは面倒だし、複雑であると考えています。
「設定例2」で示したように、外側の div タグ で width を指定しておけば、内側の div タグ では、width を意識することなく、border を指定することができます。

「設定例1」と「設定例2」では、私は「設定例2」の方が、デザインを設計、また、あとからの変更が容易であると考えています。