borderとwidthとmarginとpaddingの悩ましい四角関係 - CSSめも

Tweet はてなブックマーク TOPSY

borderを付けるとどうなるの?

こんなboxを作ってみる。(div.test50)

margin: 0;
padding: 0;
font-size: 1em;
line-height: 100%;
letter-spacing: 0px;
background-color: #f1f1f1;
overflow: auto;
width: 50%;
border-bottom: 1px dotted #000;

こんなかんじ

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

これに border を付けると、幅・高さとも変わってしまう。

border : 10px solid #ccc;
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

反則ですけど、borderを%で指定すると...

width: 46%;
border-style: solid;
border-width: 2%;
border-color: #ccc;
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

ブラウザごとに表示が異なるんでだめみたいですね。

width:100% にすると

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

とりあえず親要素内で100%となるらしい?これに border を付けるとはみだしてしまうわけ、かな?

反則ですけど、borderを % で指定。border-width:2%;width:96%; だとブラウザによって表示が違いますね。

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

width:100%border を付ける場合は親要素への影響に注意ですね。

「なるべく単位を同じにせよ」と言うのは、つまり計算違いを避けるためってことなんでしょうね。でも border-width は%で指定しちゃだめよだめよだめなのよ。(コケ)

margin・padding を設定すると

div要素での確認です。通常はwidthなしでいい場合が多いと思いますけど、IE対策でwidthを設定する時のためにmargin,paddingからの計算方法とか考えてみる。

padding:2% を設定したらはみ出しました。左右のpadding分を引いて width:96% を指定。

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

padding:2% な親箱に width:100% の小箱

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

同様に margin:2% を設定したらはみ出しました。左右のmargin分を引いて width: 96% を指定。

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

margin:2% な親箱に width:100% の小箱

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

子要素にmargin,padding,borderを設定すると

背景色付けてみると一目瞭然ですけど、きっちりwidthを指定しないとはみでたりするんですねぇ。注意かも。(div要素だからかな?)

background-color:wihte の子要素を入れる

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

子要素に margin:5%;width:90%(Opera,Firefoxは上marginの背景色がない、IE6では上下marginがおかしいなぁ)

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

子要素に margin:1em;width:90%(Opera,Firefoxは上marginの背景色がない)

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

親箱に padding:1em;width:46%; 子要素に margin:0;width:100%

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

子要素に padding:5%;width:90%

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

子要素に border:10px solid yellow;width:94%

クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ
クマがいるだけで
クマちゃう
クマしかいない夜
クマだらけ

親箱に padding:1em;width:46%; 子要素に ul要素 margin:0;padding:0 0 0 1em;

親箱 padding:5%;width40%; 子要素に ul要素 margin:0;padding:0 0 0 1em;

う〜んなんか頭痛くなってきました...

width を em で指定してみる

こんなboxで。(div.test8em)

margin: 2% 0 0 10%;
padding: 0;
font-size: 1em;
line-height: 100%;
letter-spacing: 0px;
background-color: #f1f1f1;
width: 8em;

width:8em を指定。フォントによって幅・高さが若干違うみたいですが?

クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

marginpadding も0のはずなのに、MS Pゴシックでは右側に余白があるのはなぜなのかな、って 1em は基準フォントの高さだからですか。

p要素で囲んだり、border 付けたり...

p要素で囲む。p要素に margin,padding が指定されてると改行されてますね(p要素なのだから改行していいんですけどね。文字を改行なしで表示する目的には使うべきじゃないし)。区切り文字のない長い単語ははみ出します。

クマがいるだけで

クマしかいない夜

windows123456789

windows 12345678

llliillliillliil

border 付ける

クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

というわけで、width など長さの単位をemで指定する場合は、環境次第で変わってしまうということに注意かな?

等幅フォントで

クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

環境によって基準フォントは違うってことを考えておかないといけないかも。

等幅フォントで letter-spacing:1px
letter-spacing: 1px;
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

これは改行 or はみだしが必定...

等幅フォントで font-size:80%
font-size : 80%;

幅は通常サイズの時と同じですね...ってこれもあたりまえか...orz2

クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

line-height:120% にしてみると

クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

VL Pゴシック と VL ゴシック

VL Pゴシック(プロポーショナル)とVL ゴシック(等幅)を標準にして使っていない環境でも入っていれば確認できるように、明示的に指定してみました。

【注意】このフォントがない環境では Sans-Serif 設定のフォントとなります。

width:8em を指定。フォントによって幅・高さが若干違うみたいですねぇ。

サイズはきっちり8emになってますね。でも、よくわかりませんが英数は0.5em以下とは限らないようではみ出してたり。

クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

overflow:auto を指定してみると

クマがいるだけで
クマしかいない夜
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

Firefox,Safariでは出なくていいはずの縦スクロールバーが出たりします。高さが違うのでしょうか?

Firefox,Safariでの縦スクロールバーに関しては、 line-height 調整すると消えるかな?

クマがいるだけで
クマしかいない夜
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil
VL ゴシック(等幅)を指定

ここからVL ゴシックを指定します。

【注意】このフォントがない環境では monospace 設定のフォントとなります。

サイズは英数ともきっちり8emになってますね。

クマがいるだけで
クマしかいない夜
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

overflow:auto を指定してみると

クマがいるだけで
クマしかいない夜
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

Firefoxでは出なくていいはずの縦スクロールバーが出たりします。高さが違うのでしょうか?

Firefoxでの縦スクロールバーに関しては、 line-height 調整すると消えるかな?

クマがいるだけで
クマしかいない夜
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil

備考

最終更新日:2010.5.5

em について勘違いしてたので訂正しました。すみません。

VL ゴシックはLinuxなどで標準になりつつあるので表示確認しておいた方がいいかもしれませんねぇ。

なんて、自分がWindowsでもこれを使ってるもんだから勝手に思い込んでるだけだったりするかもしれないという気がしないかもしれない。

以下、つづく...(予定は未定)


Valid HTML 4.01!