paddingを指定すると、marginが広がります。

質問

はじめまして。
現在CSSでHPを作成しているのですが、タイトルにあるように、paddingを指定すると、marginが広がってしまいます。

topのpaddingを指定するとtop-marginが・・・
bottomを指定すると・・・

のような感じです。
原因と解決方法を教えていただけないでしょうか？

#news {
width: 180px;
height: 110px;
background-image: url(img/news.gif);
margin-top: 15px;
padding-top: 30px;
background-repeat: no-repeat;
padding-bottom: 20px;
padding-left: 20px;
}

レフトに配置しています。

回答No.2

Redpython · ベストアンサー

こんにちは。

margin, border, padding など、表示させる内容に間隔を与えるパラメータが、領域の縦・横方向の寸法を指定する width と height に影響を与えることはご存知ですか？

例えば padding の場合、「横」に関係するパラメータ padding-left padding-right を増やしたら、横方向の寸法 width に与えたピクセル数を保つために、増やした分だけ width の値を減らす必要がございます。

全体の縦方向の寸法が height: 110px; であり、領域内 (<div>タグ内など) の上からの表示内容の間隔が padding-top: 0px; だとします。

height: 110px;
padding-top: 0px;

次に、領域内の上からの表示内容の間隔を 30px 開けようとした場合、その分だけ height（「縦方向の寸法だから」）を減らします(110px - 30px = 80px)。

height: 80px;
padding-top: 30px;

回答No.1

noname#65286

これだけの情報では解決できそうもありません。
関連する具体的なソースを公開してください。