みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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;
}

投稿日時 - 2005-10-27 11:29:40

QNo.1738985

困ってます

質問者が選んだベストアンサー

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

投稿日時 - 2005-10-29 06:29:29

お礼

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

投稿日時 - 2005-11-01 09:07:43

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

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

投稿日時 - 2005-10-27 19:12:53

お礼

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

投稿日時 - 2005-11-01 09:06:33

ANo.1

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

│ │ │ ├──エレメント(要素)の幅──

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

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


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


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

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


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

1.幅759以下でなく758以下とする。
理由は線の指定が上下左右の指定がないので枠線との事ですから左右両方にあるという事ですよねぇ???

2.margin は border の外側の指定で、paddiing は border の内側の指定です。

投稿日時 - 2005-10-27 15:43:23

お礼

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

投稿日時 - 2005-11-01 09:01:29

あなたにオススメの質問