日記の文章が枠に張り付いています・・

質問

初心者です。CSS編集で色々参考にしてやってるのですが、どうしてもわかりません。
左寄せで枠つきで日記を書いてるのですが、
枠に字がぴったりとくっついていて、多少スペースを入れたいのですが、"padding"というので合っていますか？さらにこの中で↓どこにそれをいれればいいのかわかりません・・・。

/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom: 10px;
}
/*message*/
#message{
P STYLE="line-height: 1.8;"
width:99%;
margin-bottom: 15px;
border-top: 1px dashed #778899;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #778899;
}
#message .contents{
margin-top: 10px;
margin-bottom: 10px;
}

回答No.1

mid_kazwo · ベストアンサー

#message .contentsのような気もしますが、これだけじゃわかりませんね…。
＃ あなたの日記の本文部分に、どのIDやクラスが割り振られているかがわからないので。

ちょっと強引なやり方ですが、本文部分に直接効く（一番近い）のが何なのか調べるために、#main、#message、#message .contentsの全てに異なる色をつけてみてはいかがでしょうか？

#main {
　：
color: #FF0000; /* 文字色：赤 */
background-color: #FF8080; /* 背景色：薄い赤 */
}
#message {
　：
color: #00FF00; /* 文字色：緑 */
background-color: #80FF80; /* 背景色：薄い緑 */
}
#message .contents {
　：
color: #0000FF; /* 文字色：青 */
background-color: #8080FF; /* 背景色：薄い青 */
}

＃ 日記のソースを見て、id="main"やid="message"で括られている箇所、id="message"で括られてclass="contents"が指定されている箇所を調べるのが間違いないんですけど…

それからプロパティは、marginとpaddingが該当すると思います。
その違いは、領域自体（境界線の内側）に余白がつくのがpaddingで、境界線の外側に隙間があくのがmarginという点です。
http://www.htmq.com/style/margin.shtml

なお、paddingとmarginについてはブラウザによって多少解釈が異なるので、実際の見栄えはIEやFirefoxなど複数のブラウザで確認した方が良いかも知れません。
もしもブラウザが1種類しかない（確認できない）なら、paddingとmarginに半分ずつ指定するのも手です。

＃ スペースを10pxにしたいなら、margin: 5px; padding: 5px; を指定してしまう。

それでは、頑張ってくください。

参考URL：

http://www.htmq.com/style/margin.shtml

お礼

お返事ありがとうございます!
早速試して見たいと思います。
回答者様、すごい詳しそうですね・・・！