XHTML・CSSでの塊と塊の隙間の空け方は？

質問

• XHTML・CSSでの塊と塊の隙間の空け方について、隙間を開ける方法や注意点についてまとめています。
• XHTML・CSSでは、塊と塊の隙間を開けることに悩んでいる方も多いです。h2タグやpタグのmarginを調整したり、画像の回り込みを設定したりする方法がありますが、思うように隙間が開かないこともあるようです。
• XHTML・CSSで塊と塊の隙間を開ける方法について、まとめて詳しく教えてください。どのような方法が効果的で、隙間を開けるために注意すべき点はありますか？

回答No.5

ORUKA1951

スタイルシートです。こちらはもっと簡単です。
★同じくタブは全角スペースに置き換えてある。
　シンプル　イズ　ザ　ベスト
　たぶん見るだけで何をしてるかわかる

[default.css] すべての端末に適用される固定スタイルシート

@charset "Shift_JIS";
html,body{margin:0;padding:0;line-height:1.4em;}
p,dd{text-indent:1em;}
hr{visibility:hidden;clear:both;}
p{margin:1ex 1em;}

[standard.css]scheemとcolorで分けたほうが楽かも

@charset "Shift_JIS";
/* 共通設定 */
body{background-color:gray;}
h2,dt,ol li{font-weight:bold;font-size:1.2em;}
div.header,
div.section{
　width:60%;max-width:600px;margin:0 auto;padding:5px;
　background-color:white;border:white 1px solid;
}
div.album img{float:right;margin-bottom:10px;}
h2{border-top-color:green;border-top-width:2px;border-top-style:solid;}
/* dlで括った場合 */
div.album dl{clear:both;margin:10px 0 0 0;padding:0;}
div.album dd{margin:1ex 1em;}
div.album dt{
　border-top-color:green;border-top-width:2px;border-top-style:solid;
}
/* olで括った場合 */
div.album ol,div.album ul{margin:0;padding:0;}
div.album ol li{
　clear:both;list-style:none;margin:0;padding:0;margin:1ex 0;
　border-top-color:green;border-top-width:2px;border-top-style:solid;
}
div.album ol li li{
　clear:none;font-weight:normal;font-size:1em;border:none;margin-left:1em;
　text-indent:1em;
}
div.album ol li.dummy{clear:both;border:none;}

お礼

これもかなり参考になります。ありがとうございました