解決済みの質問
paddingが反映されません・・・
paddingが反映されません・・・
テキストは左寄せ・幅を画面いっぱいに設定しました。
余白を設けようと思ってpaddingを入れてみました。
余白はできるのですが、横方向のスクロールバーが出てしまい困っています。
width: 100%; の記述があれば、スクロールバーは出ないはずですよね・・・
ソースです。余分なテキストは消しました。
<div id="honbun" align="left">
テキスト
</div>
#honbun {
clear: both;
width: 100%;
padding: 4px 10px;
}
- 補足
- margin: 4px 10px;
と書いたとしたら、幅は「100％＋（10px×2）＝100％＋20px」
となるのは分かるのですが、
paddingは内側の余白ですよね、となると、
「（10px×2）＋残り＝100％」になると思うんですよ・・・
-
- 質問日時：
- 2012/3/1 22:30:44
-
- 解決日時：
- 2012/3/5 20:30:44
-
- 回答数：
- 3
-
- 閲覧数：
- 63
-
- ソーシャルブックマークへ投稿：
- Yahoo!ブックマークへ投稿
- はてなブックマークへ投稿
- （ソーシャルブックマークとは）
ベストアンサーに選ばれた回答
＞ paddingは内側の余白ですよね、となると、
＞ 「（10px×2）＋残り＝100％」になると思うんですよ・・・
違いますね。
「100% (コンテンツの幅) + paddingのサイズ + borderのサイズ」 になります。
width:〇〇%は親要素に対して〇〇%、ルート要素であればブラウザの幅に対して100%です。
それにpaddingやborderを加えたらその分はみ出すので100%以上になります。
というわけでスクロールバーが出ている状態は「正しい状態」です。
ボックスモデル
http://www.y-adagio.com/public/standards/tr_css2/box.html
あとalign属性は廃止予定の属性なので消してCSSのtext-align:left;などを使って下さい。
- 違反報告
- 回答日時：2012/3/2 00:18:12
- この質問・回答は役に立ちましたか？
- 役に立った！
お役立ち度：
0人が役に立つと評価しています。
ベストアンサー以外の回答
（2件中1〜2件）
- 並べ替え：回答日時の
- 新しい順
- ｜
- 古い順
(追記)
あくまで、widthは、内容部分の範囲。
そして、それに追加した指定は全てプラスされます。
marginでも、paddingでも、borderでもです。
paddingは内側の余白と考えたくなる気持ちは分かりますが、あくまで、背景の範囲等が広がる指定…くらいの意味でしかありません。
widthのサイズからプラスして余白を取る指定であることには変わりがありません。
では、あなたの言うようにpaddingを計算するとしましょう。
幅200pxの画像があるとします。
<img src="画像" width="200">にpaddingを指定したら？
指定したpadding分だけ、白く画像は欠けてしまうんですか？
それとも、自動的に、200px未満に縮小表示されるべき…ですか？
あなたの言っている計算方法だと、そういう事になります。
そもそも、あなたの思う計算方法だと面倒臭いことが色々おこります。
widthのサイズ指定の単位にも色々あります。その中に、[em]なんて単位もあります。
この単位は、○文字分という単位です。
あなたの例の[テキスト]という本文なら、width:4emと指定してやれば、ブラウザの文字サイズに関わらず横幅を４文字分サイズにしてくれます。便利な指定方法の一つです。
でも、padding指定したら？
あなたの考え方で言ったら、どういう計算をして、widthのサイズを指定してやれば良いんですかね？
--------------------------------------------------------
パーセント指定というのは、その親要素に対して…という意味になります。
この場合だと、<body>です。つまりはブラウザの横幅サイズまんまが、100％の幅です。
そして、paddingなどは、その横幅にプラスされて計算されます。
この場合の左右のpaddingは10pxですから、あなたは横幅を[100％+20px]と指定しているんです。
スクロールバーが表示されても不思議ではありませんよね？
- 違反報告
- 編集日時：2012/3/2 00:37:29
- 回答日時：2012/3/1 23:26:31
質問した人からのコメント
paddingにしても100％にはならないんですね・・・
勉強になりました。