水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > CSSとか

CSSとか

2001年10月11日(木曜日)

CSSとか

勘違いしていた理由の一つに、要素は横幅一杯の幅が有るものだと思っていたのがあります。border付けたりすると割と広い範囲で枠がつくし。

以上、びいさんの日記。 より

それはあながち間違いでもないです。特に何もしなければブロック要素には横幅いっぱいの幅があります。

要素の幅が踏んでいるテキストの大きさによって変動するのであればナビゲータ4.xのborderの挙動が正しいということになりそうですが、何がどう違うのやら。

以上、びいさんの日記。 より

いえ、中身のテキストの量によって横幅が変わることは原則としてありません(中身のテキストがはみ出すことはあります)。よって、Netscape4.x の挙動は明らかに変です、というか border を指定すると挙動が変わるってどういうことなのか小一時間問い詰めたいところです。

要素の大きさはどこで決まるのだ。

以上、びいさんの日記。 より

CSS2 の 10.3 あたりに書いてあります。

たとえば、通常フローにある非置換ブロックの幅は、

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

以上、CSS2 10.3 Computing widths and margins より

となるように算出されます。margin, padding の初期値は 0 で、border の初期値は medium ですが border-style: none であれば幅は 0 と計算され、width の初期値は auto ですから、これらが何も指定されていないときは width が containing block の幅と同じに、その他は全て 0 になります。

ちなみに H1要素のテキストがはみ出たりクリッピングされる理由が未だに判らないのですが、要素の高さってドコで決まるのだ? なんでパディング領域を突破したりするのだろう。謎。

以上、びいさんの日記。 より

高さは 10.6 の方を見てください。

If 'height' is 'auto', the height depends on whether the element has any block-level children. If it only has inline-level children, the height is from the top of the topmost line box to the bottom of the bottommost line box.

以上、CSS2 10.6 Computing heights and margins より

height の初期値は auto なので、特に何も指定しない場合は、インラインボックスしか含まない h1要素の高さは中身の量で決まります。

自分自身にも先祖要素にも height の指定がないなら、はみ出ると言うことはまずありません。それなのにはみ出たりする場合は、日ごろの行いかブラウザの実装のどちらかが悪いものと思われます。

関連する話題: CSS / もののけ / びいさん

最近の日記

関わった本など