paddingを指定するとwidthやheightが広がってしまう、

質問

はじめまして。
今回CSSに挑戦しているのですが、widthとheightを指定して、それぞれpaddingを指定すると自動的に指定したpx分だけwidthやheightが広がってしまいます。

見るブラウザによってはwidthやheightに影響することなく指定できたりするのですが・・・

これらを解決する方法はありますでしょうか？
今は、応急処置として大枠の中にもうひとつ枠を用意してmarginを指定しています。
ただ、あまりdivを入れ子？にするにもよくないと聞いたので・・・直接解決できればありがたいのですが・・・

どうかよろしくお願致します。

回答No.3

SAYKA · ベストアンサー

うん　確かにdivの入れ子は良くないけれど、結局他の人たちが言うようにpaddingの表現に違いが出てしまうから解決するには入れ子しか無いんだよね・・・
外側のdivで大きさ指定、内側は余白(paddingやmargin)を指定、という多重構造。
何の為のcssなんだか判らないやりかたになるからよろしくないというだけで、
現行の方法でレイアウトが崩れたら「W3Cに準拠してないのが悪い」という方向で突っ走るか入れ子か、どっちかしかないね。

お礼

ありがとうございます。

これ！といった解決方法はないのですか・・・
最終的にはwrapから考えると、3重、4重になってしまいます・・・

ちなみに、私が読んだ本によると、divの入れ子はこれが悪い！というのではなく、やめたほうがいい程度だったのですが、いったい何がいけないのでしょうか？

No.1の方のdivにheightも気になりますし・・・

補足

すみません・・・何度も。

＞外側のdivで大きさ指定、内側は余白(paddingやmargin)を指定、という多重構造。
今ふと思ったんですけど、paddingを指定して、widthやheightが広がらない条件ってのもあるのでしょうか？
枠といっても私の場合、一番大枠をwrapで囲っているので、一応内側といえば内側なので・・・

marginもfloatと一緒に使えなかったりするので、少しでもpaddingが使えればとてもありがたいのですが・・・

再度ご覧になられましたらどうかよろしくお願致します。

回答No.6

miya_00

divにheight指定しない方がいいって理由は

今のWebにはユーザの環境がバラバラって事もあり、どのユーザーにも対応出来るようにWebサイトを作るのが主流というか普通になっているんです。

heightを指定した場合、タイリング（フォントサイズを大きくしたり、小さくしたり）に対応出来なくなるので、出来るだけheightを指定はしない方がいいですよ。

回答No.5

Nine-nine

全体=margin+padding+width+border
の場合と
全体=margin+width
　width=paddin・borderも含む
と２種類のモードがあります。標準モードと互換モードです。
そして、それの切り替えをDOCTYPEスイッチ、文書宣言で行います。
innovaさんがだれに見て欲しいか？だれを切り捨てるか？等の選択で決まります。正しいのは標準モード、古い間違った解釈をするのが互換モードです。宣言によって、いろいろな解釈をブラウザがしますので……。divを増やすのは、paddingの扱いが違うのだから、paddingを使わなければいいということで、あまりおすすめできる方法ではありません。そして、自分が選択した計算にあうように数値を指定すれば解決です。

「ボックスモデル」で調べると図解されたページが沢山出てきます。最初によく躓くところですので。でも、ある程度、基本を理解していないと図を誤解する可能性もあるのですが。divはボックス要素、pはインライン要素ってわかりますか？わかる事を祈って、レッツ検索！

お礼

ありがとうございます。

レッツ検索（笑）してみます！
ボックス要素、インライン要素・・・このあたりしっかり理解して、出直してみます。

本当にありがとうございました。

回答No.4

SAYKA

>一番大枠をwrapで囲っている
どういう方法だかは判らないけれど
要するにこう

<div style="width:100px;height:100px;">
　<div style="margin:1em">
　　本文
　</div>
</div>

内側のpaddingや本文がどうなっていようとも外側のdivは不変、っていうやりかた。

ここでの問題になっている「widthとpadding」は、widthにpaddingを含んで描画されるのかされないのか、という話に尽きる。
つまり空間として確保するのがwidthでpaddingはその外側、ってなると件の膨らみが発生。
そうでなくpaddingはwidthの空間の中で取られる、という描画だと膨らまず、そしてその描画になるのかならないのかはブラウザ依存、という状況。

お礼

ありがとうございます。

emをあまり使ったことがなく、emという文字を見ただけで、わからなくなってしまうのは理解できていないからでしょうね・・・

勉強して、頑張ってみます。

本当にありがとうございました。

回答No.2

goldfox

＞見るブラウザによってはwidthやheightに影響することなく指定できたりするのですが・
つまり、ブラウザによってwidthの解釈が違うということです。
padding分を差し引く方法だと、ブラウザによっては指定したい幅より狭くなります。

＞あまりdivを入れ子？にするにもよくないと聞いたので・
用途に合った要素を利用すれば、divの入れ子はそうそうなりません。
例えば、divの中身が文章なら<p>を、リストなら<ul>を使い、それらにmarginを指定すればよいのです。

お礼

いつもお世話になっております。
そして、ありがとうございます。

この現象のこれ！という解決方法はないのでしょうか？

＞用途に合った要素を利用すれば、divの入れ子はそうそうなりません。
確かに・・・特にリストが使えていないので、勉強してみます。

回答No.1

miya_00

解決法は簡単です。

指定したpadding分だけwidthから引けばいいんです。

例えば、widthを700pxにしたくて、paddingを両サイドから10pxづつとりたいのであれば、
width: 680px;
padding: 0 10px;
と指定する問題はおきません。

後divにheightは指定しない方がいいと思います。

お礼

ありがとうございます。
divにheightは指定しない方がいいのですね・・・

こちらも初めて知りました。
ちなみに理由はなんででしょうか？