Boostrap showing weird behavior

Question

I don't know why Bootstrap is doing this. I want the whole background of the website to be black and for that I'm doing this inside HTML file

<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>

and inside css file.

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

but the output is leaving a white space of 30px from the top. See this output

Why not just add the background color to body? `body { background-color: black; }` — GrumpyCrouton, Jan 31 '18 at 18:35
@GrumpyCrouton its not working. the background stays white if i do it to body {} — Richard Doe, Jan 31 '18 at 18:36
@Jer How does it not solve the problem? If OP wants the whole page to be black, the whole body can be colored black lol — GrumpyCrouton, Jan 31 '18 at 18:37
It's an overflow issue in the parent DIV and has nothing to do with Bootstrap. — Carol Skelly, Jan 31 '18 at 18:53
True . You just self putted
with margin-top : 30 it's not bootstrap fault.Remove margin-top just. — Virender singh Rathore, Jan 31 '18 at 19:45

pavger · Answer 1 · 2018-01-31T19:10:41.190

-1

That space is from the paragraph margin-top: 30px; which is caused from margin collapsing. If there is no border, padding, etc. on the parent element to separate margin-top on the first child block, then those margins collapse.

Here is further explanation about margin collapsing on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

There are multiple ways to get rid of that white space. Remove the margin from the paragraph and replace it with padding-top: 30px; or add at least padding-top: 1px; to either the .container or #welcomeSection divs.

edited Jan 31 '18 at 19:10

answered Jan 31 '18 at 18:39

pavger

684
2
11
21

this is not enough as an explanation. Margin is meant to add space oustide the element and inside it's parent container, so you need to say that we have margin-collpasing issue which make this margin go outside and thus creating this issue – Temani Afif Jan 31 '18 at 18:58
Ok I'll update my answer. Thank you for the suggestion. – pavger Jan 31 '18 at 19:05

Boostrap showing weird behavior

1 Answers1