Question

我不知道为什么Bootstrap会这样做。我希望网站的整个背景都是黑色的，为此我在HTML文件中做这个

<body>
    <div id="fullWrapper">
        <section id="welcomeSection">
            <div class="container">
                <p style="margin-top:30px;">Welcome to the website. This website was made to test the light and dark modes with bootstrap</p>
            </div>
        </section>
    </div>
</body>

和里面的css文件。

#fullWrapper {
    background: rgb(0, 0, 0);
    height: 1000px;
}

但是输出从顶部留下了30px的空白区域。见output

Answer 1

该空格来自段margin-top: 30px;，这是由边距折叠引起的。如果父元素上没有边框，填充等，以分隔第一个子块上的margin-top，则这些边距会崩溃。

以下是有关MDN边缘折叠的进一步说明：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

有多种方法可以摆脱那个空白区域。从段落中删除边距并将其替换为padding-top: 30px;或至少将padding-top: 1px;添加到.container或#welcomeSection div。

Boostrap显示出奇怪的行为

1 个答案: