ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：noname#64096 paddingを指定するとwidthやheightが広がってしまう、
困り度：
  • すぐに回答を！
 はじめまして。
今回CSSに挑戦しているのですが、widthとheightを指定して、それぞれpaddingを指定すると自動的に指定したpx分だけwidthやheightが広がってしまいます。

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

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

どうかよろしくお願致します。
質問投稿日時：08/03/27 12:01
質問番号：3898877
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

 
回答者：miya_00 divにheight指定しない方がいいって理由は

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

heightを指定した場合、タイリング（フォントサイズを大きくしたり、小さくしたり）に対応出来なくなるので、出来るだけheightを指定はしない方がいいですよ。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/03/28 00:29
回答番号：No.6
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

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

「ボックスモデル」で調べると図解されたページが沢山出てきます。最初によく躓くところですので。でも、ある程度、基本を理解していないと図を誤解する可能性もあるのですが。divはボックス要素、pはインライン要素ってわかりますか？わかる事を祈って、レッツ検索！
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/27 17:34
回答番号：No.5
この回答へのお礼ありがとうございます。

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

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

回答

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

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

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


ここでの問題になっている「widthとpadding」は、widthにpaddingを含んで描画されるのかされないのか、という話に尽きる。
つまり空間として確保するのがwidthでpaddingはその外側、ってなると件の膨らみが発生。
そうでなくpaddingはwidthの空間の中で取られる、という描画だと膨らまず、そしてその描画になるのかならないのかはブラウザ依存、という状況。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/27 15:38
回答番号：No.4
この回答へのお礼ありがとうございます。

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

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

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

回答

良回答20pt
回答者：SAYKA うん　確かにdivの入れ子は良くないけれど、結局他の人たちが言うようにpaddingの表現に違いが出てしまうから解決するには入れ子しか無いんだよね・・・
外側のdivで大きさ指定、内側は余白(paddingやmargin)を指定、という多重構造。
何の為のcssなんだか判らないやりかたになるからよろしくないというだけで、
現行の方法でレイアウトが崩れたら「W3Cに準拠してないのが悪い」という方向で突っ走るか入れ子か、どっちかしかないね。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/27 14:39
回答番号：No.3
この回答への補足すみません・・・何度も。

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

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

再度ご覧になられましたらどうかよろしくお願致します。
この回答へのお礼ありがとうございます。


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

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

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

回答

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

＞あまりdivを入れ子？にするにもよくないと聞いたので・
用途に合った要素を利用すれば、divの入れ子はそうそうなりません。
例えば、divの中身が文章なら<p>を、リストなら<ul>を使い、それらにmarginを指定すればよいのです。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/27 13:08
回答番号：No.2
この回答へのお礼いつもお世話になっております。
そして、ありがとうございます。

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

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

回答

 
回答者：miya_00 解決法は簡単です。

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

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

後divにheightは指定しない方がいいと思います。
種類：回答
どんな人：専門家
自信：自信あり
回答日時：08/03/27 12:44
回答番号：No.1
この回答へのお礼ありがとうございます。
divにheightは指定しない方がいいのですね・・・

こちらも初めて知りました。
ちなみに理由はなんででしょうか？
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ