これは一般的な問題のようです。私は他の5つまたは6つのSOの質問を確認しましたが、このケースに正確に当てはまるものや、私に役立つ解決策を持っているものはないようです。この時点で「なぜそれが起こっているのか」として「それを修正する方法」を気にかけているかどうかさえわかりません。親切にしてください、HTMLは私の専門ではありません。
私はこのHTML/CSSを持っています：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: #336699;
}
.postContainer {
margin-left: 40px;
background: white;
width: 555px; /* 480px + 75 for bg */
}
.postTop {
background: red;
height: 75px;
padding-left: 80px;
}
.postMiddle {
background: yellow;
padding-left: 80px;
}
.postBottom {
background: red;
height: 75px;
padding-left: 80px;
}
</style>
</head>
<body>
<div class="postColumn">
<div class="postContainer">
<div class="postTop">
<p>asdf</p>
</div>
<div class="postMiddle">
<p>asdf</p>
</div>
<div class="postBottom">
<p>asdf</p>
</div>
</div>
</div>
</body>
</html>
私はそれの多くを取り除いた。目標は、上部、中央部分が引き伸ばされ、下部が左下にある画像を含むブログ投稿を作成することです。したがって、上部の領域には短いテキストが含まれ、中央の領域には任意の量のテキストが含まれ、下部の領域には1行分のテキストが含まれます。ただし、divの間にスペースがあるため、画像が整列しません。
FirebugとChromeの開発ツールでマージンを確認しました。どちらもマージンもパディングもないと主張しています。マージンを明示的に設定しましたが、何も変更されていません。一部の質問では、行の高さを変更することをお勧めします。私はそれを試しましたが、ギャップを修正せずにテキストが不安定になります。高さを変えてみました。一部の投稿では、divの内容が親マージンに影響を与える可能性があると述べていますが、それらを変更しても何も起こりません。多くの投稿が「リセットファイルを使用してください！」と述べています。私はそれが何であるかをある程度理解していますが、ランダムに適用する前に、なぜそれが機能するのかを知りたいです。では、どのようなブードゥーの呪いがこのスペースを挿入しているのでしょうか。また、どうすればそれを壊すことができますか？