【HTML/CSS】divに指定したwidthが反映されないときの対処方法

div-width02

こんにちは。松本です。

最近ずっと、雨が降っていないですね。オフィスのサンちゃんやモンちゃんはそんなに水分を必要としないので問題ないのですが、このまま雨が降らないのも冬の植物にはよくないのではと心配です。っていうのは建前で、明日土曜日は大事な予定が屋外があるのに、雨かもしれないっていう、降るなら平日にお願いします!

ということで、今回は先日に引き続き、Web制作のなかで気づいた小ネタ紹介です。

divにテキストを入れて、そこに、CSSでスタイルを入れていっていた時です。

こんな感じのスタイルをh2につけていました。

div-width01

#n1 h2 {
color:#FFFFFF;
background: #FFCF05;
width: 400px;
text-align:center;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-boder-radius: 10px;
margin:0 auto;
padding:20px 5px;
}

そして、デザイン見てみると、

div-width02

なんじゃこりゃー!

松本『岡部さん。ちゃんとdivの幅と合わせているのにこんな風になってしまうんですけど。。。』

岡部『こうしてみなさい。』

div-width03

しっかり、おさまったーーーー!!

そうです。divのwidthと同様の指定をしてしまうとはみ出してしまうのです。その場合は、divのwidthより-10pxしてあげると、ピタッとします。知らなかったです。また、ひとつ制作に役立つことをおぼえました。

あぁ明日、雨降らないでほしいな、と思いながら、今週中にはサイト仕上げなきゃ!!

説明が足らん!!

なぜ-10pxするとうまくいったのか?

paddingで左右の余白を5px+5px=10px取ってあるので、その分widthを狭くした、というわけです。

感覚的に、paddingはwidthの範囲内で考えがちだけど、実際はpaddingの値を加味してwidthを指定しなきゃダメよ、っていうお話。

幅や高さの指定は、paddingの他、margin、borderの幅、なんかも影響してくるので、思い通りにレイアウトできないときは、この辺りを見直すと良い感じに解決できるはずです。

オカベ

The following two tabs change content below.
松本

松本

営業
埼玉県在住。アパレル会社での企画営業経て、2013年にスマートスタイル・コンプレックス株式会社へ入社。好きなことは歌うこと♪声の大きさは、社内No.1!最近はまっているのは登山。山ガールよ、集まれー。