5

私は次のようなコードのブロックを持っています：

<div class="header">
</div>
<div class="right-gradient">
    <div class="left-gradient">
        @RenderBody()
    </div>
</div>

.right-gradient
{
    background: url('Images/RightGradient.png') repeat-y right top transparent;
}
.left-gradient
{
    background: url('Images/RightGradient.png') repeat-y left top transparent;
}

結果は次のようになります。

| ------------------- |
|#####ヘッダー######|
| ------------------- |
| // \\ |
|//コンテンツ\\|
| // \\ |
| // \\ |
---------------------

ただし、代わりに次のようにレンダリングされます。

| ------------------- |
|#####ヘッダー######|
| ------------------- |
| | -ここに余分なスペースがあることに注意してください
| // \\ |
|//コンテンツ\\|
| // \\ |
| // \\ |
---------------------

ヘッダーとコンテンツの間の余分なスペースがどこから来ているのかを把握しようとしているときに、divに境界線を追加すると、実際に問題が修正され、ヘッダーとコンテンツの間の問題のあるスペースが削除されることがわかりました。

.right-gradient
{
    background: url('Images/RightGradient.png') repeat-y right top transparent;
    border: 1px red solid;
}
.left-gradient
{
    background: url('Images/RightGradient.png') repeat-y left top transparent;
    border: 1px blue solid;
}

どうしてこれなの？

問題を再現するサンプルコードを含むjsfiddle

4

2 に答える 2

4

簡単に言えば、あなたのマージンは崩壊しました。MDNにはこの現象の説明があります。

ブロックのマージントップを最初の子ブロックのマージントップと分離するための境界線、パディング、インラインコンテンツ、またはクリアランスがない場合、または境界線、パディング、インラインコンテンツ、高さ、最小高さ、または最大値がない場合-ブロックのマージンボトムを最後の子のマージンボトムで分離する高さ。その後、これらのマージンは折りたたまれます。折りたたまれたマージンは、親の外側になります。

ソース：https ：//developer.mozilla.org/en-US/docs/CSS/margin_collapsing

于 2013-01-08T21:03:22.733 に答える
1

この問題は、グーグルで検索するとかなりよく文書化されていますが、バグなのか、正確になぜ発生するのかはわかりません。

overflow:hidden;境界線を追加せずにスペースを取り除くようにしてください。

于 2013-01-08T20:47:52.577 に答える