CSSのmarginとpadding

質問

テーブルの指定で以下のように指定しています。
この場合、

1.760pxのテーブルで右1pxの線をしていますが、この場合、中に入れる画像（その他のピクセルサイズ指定）は759pxまでにしなければいけませんか？

2.marginでなく、paddiingで指定した場合も教えてください。

table.top {
border-style : solid ;
　　border-width : 0 1px 0 0;
　　border-color : #333333;
　　margin-top: 5px;
　　margin-right: auto;
　　margin-left: auto;
　　margin-bottom: 0;
　　width: 760px;
}

回答No.3

cyokokichi · ベストアンサー

DOCTYPE スイッチでOpera、Netscape Navigator Internet Explorer の最新版同士ならwidthをボックスの内容の幅に揃えることができます。

その場合760pxで問題ないと思います。
W3C非推奨タグが使えるTransitionalでもDOCTYPE スイッチは有効です。

参考URL：

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html

お礼

参考URLの実例編のページはとてもわかりやすかったです。
どうもありがとうございました。

回答No.2

partita

widthはpadding・borderを含む場合と含まない場合があります。

WindowsIE6.0互換モード、WindowsIE5.5以前は「含む」場合に入ります。ブラウザバグですが、WindowsIEはシェアが多いので無視できないでしょう。
http://cssbug.at.infoseek.co.jp/detail/winie/b001.html

ブラウザハックと言って、ブラウザに応じて読み込ませるCSSを振り分ける裏技がありますので調べてみてはいかがでしょうか。
http://codeweb.seesaa.net/article/7658025.html

お礼

CSS振り分けは以前から気になっていたところです。色々調べてみたいと思います。ありがとうございました。

回答No.1

koutarou504

┌─────────────────────
│　　　　　　　マージン（外側の余白）
│　┌───────────────────
│　│　　　　　ボーダー（罫線）
│　│　┌─────────────────
│　│　│　　　パディング（内側の余白）
│　│　│　┌───────────────
│　│　│　│　コンテンツ（内容）

│　│　│　├──エレメント（要素）の幅──

├──────── ボックスの幅 ──────

margin-left + border-left-width + padding-left + width
+ padding-right + border-right-width + margin-right

だったと記憶していますので、
border, margin, paddiing 共に指定内容はその中身というかここでは「中に入れる画像（その他のピクセルサイズ指定）」に影響をあたえないはずです。
というより、もしかすると作成者（質問者さん）の意図する値よりも要素としては場所をとっているかもしれません。

あと、上記記憶は規則上の物で、ブラウザにバグがあれば異なる場合も・・・。
（ＣＳＳに対するブラウザのバグはよく聞きます。）

で、出来れば実際に簡単な画像をテーブルの内外に表示してみて、動作確認される事をお勧めします。

それも回避して単に無難な作業を簡易に行いたい場合は、

１．幅７５９以下でなく７５８以下とする。
理由は線の指定が上下左右の指定がないので枠線との事ですから左右両方にあるという事ですよねぇ？？？

２．margin は border の外側の指定で、paddiing は border の内側の指定です。

お礼

どうしても両端にぴったりの画像をいれたかったので、1pxが気になり、ご相談しました。
ありがとうございます。