JavaScriptとCSS - 位置とサイズ

いまさらな自分用おさらい

ブラウザは

Firefox 2.0.0.9
Internet Explorer 7.0.5730.13
Opera 9.24

一部ライブラリに

Prototype 1.6.0

で、確認
要素はdiv

----

element.style.width / height
    内容が表示される領域のサイズ
    border,padding,marginは含まない
    client area な理解

computed width / height (getWidth() / getHeight() @  prototype.js)
    border,paddingを含んだサイズ
    marginは含まない

element.style.top / left / right / bottom
    border,paddingを含んだ領域の位置
    marginは含まない
    つまり実際にはmargin分ずれて表示される
    取得時にもmarginは加味されない

positioned offset top / left (positionedOffset() @ prototype.js)
    border,padding,marginを含んだ領域の位置
    取得のみ + top,leftのみ
    例えばstyleで top: 2px; left: 2px; margin:4px; のとき
    positioned offset は [6px,6px]
    要はcontainer代わりの祖先要素のclient area(に相当する部分)からの相対位置

----

センタリング

CSS的にはセンタリングされる要素のmarginで設定して欲しいそうな
margin-left:auto ; margin-right:auto ;
が、ブラウザ対応がいまいち。
個人的に、センタリングされるほうで指定するのはなんか気持ちが悪いのですが。

<div align="center">...</div>
ブラウザ対応的には無難。
だがしかし非推奨。
alignは子孫要素にも継承されるっぽいので注意。

<div style="text-align: center">...</div>
自分および子孫のインライン要素に対する指定なのでブロック要素には無意味。
のはずだけどIEだとバージョン+DOCTYPE次第でブロック要素にも効いたり効かなかったり。
alignの代替表記というのはガセ。意味が違う。

----