This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 years ago.
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
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.
Related
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 1 year ago.
I'm new to web dev, and I'm trying to understand more about the white space on the top of the page.
Here's my code snippet:
HTML:
<div>
<p>lorem ipsum</P>
</div>
CSS:
div {
background-color: black;
}
I tried to set 0 margin to the body element but the very top of the browser will still show white space.
body {
margin: 0;
}
Then I tried to add padding to the div, and the white space will no longer be there.
div {
padding-top: 100px;
}
But is there other ways to get rid of the white space?
Also, my understanding was that the browser has default setting to set margins, why did the white space remain after I set the body element's margin to 0?
You can specify both margin and padding to be 0 for the HTML element to remove all whitespace around the HTML element.
html {
margin: 0;
padding: 0;
}
This same technique can be used to remove all whitespace around any given element. By default, the p tag will include an added margin, causing more whitespace. To completely remove all whitespace for your given scenario, you can edit the above CSS block to the following:
html, body, p {
margin: 0;
padding: 0;
}
You can use this also:
*{
margin :0;
padding :0;
box-sizing :border-box;
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How do nested vertical margin collapses work?
(3 answers)
How to disable margin-collapsing?
(12 answers)
Closed 3 years ago.
Consider the following HTML/CSS:
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
<p>Paragraph #3</p>
</div>
div {
background-color: gray;
padding: 0;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
The containing div has no padding, so the top margin of p #1 and the bottom of p #2 are not respected, effectively zero:
But now, if we introduce just a smidge of padding to the containing div, these margins are suddenly respected:
div {
padding-top: 1px;
padding-bottom: 1px;
}
Question:
Why does this behavior make sense? Why do the leading/trailing margins depend at all on the padding? Why don't they simply appear all the time, or not at all?
Is this behavior standard? It seems fairly consistent cross-browser (IE9, Firefox 69.0.3, Chrome 77.0.3865.120).
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
Learning CSS in earnest, and a bit confused.
I have a table in a div.
.bigdiv {
background-color: red;
padding: 10px;
}
table {
background-color: aquamarine;
margin-left: 300px;
margin-bottom: 100px;
padding: 10px;
}
<div class="bigdiv">
<table>
<tr>
<td>foo</td>
</tr>
</table>
</div>
which works as I expect, with a big 110px red swath below the aquamarine box.
But when I take the padding out of the div, the margin-bottom overflows the div, and the visual appearance is an aquamarine box at the edge of a red div.
I'd like to understand the rules behind this behavior. Is this something specific about divs, or does the container generally have to have a nonzero padding in order for the content's margin to appear in the container?
Margins collapse which means when you have an elemeht with a bottom margin and another one with a top margin below, it will only display the biggest one.
This is true for parent/child margins, too. Only the biggest margin is displayed and that outside the parent.
There are 2 css workarounds:
overflow:auto
padding:1px
Both css rules can be added to the parent to solve the problem.
For further examples and more explanation you can find something e.g. here:
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
The keyword you need to search for is "margin collapsing"
This question already has answers here:
CSS Margin Collapsing
(2 answers)
CSS Text Bottom Margin Ignored
(3 answers)
Closed 7 years ago.
I am using two divs, one on top with no content or height and the other below it with some content or just height. I wish to put some space between them and instead of using margin-bottom alone on the first div or margin-top alone on the second div I am evenly sharing the space between both, i.e. half the space on the first div's margin-bottom and half the sapce on the second div's margin-top. For some reason only one of the two seem to apply and the other is ignored.
Check out this example
http://jsfiddle.net/hkgq22x8/
body {
margin:0px;
}
.element1 {
margin-bottom:10px;
}
.element2 {
margin-top:10px;
border:1px solid #000;
height:30px;
}
<div class="parent">
<div class="element1"></div>
<div class="element2"></div>
</div>
try removing either margin-top on .element2 or margin-bottom on .element1, the space remains the same, but remove both and the space disappears.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
I have very simple code for beginning:
<!doctype html>
<head>
</head>
<body>
<style>
.master {
background: green;
}
.master div {
background: red;
}
</style>
<div class="master">
<div>
abc
</div>
</div>
</body>
</html>
I put it also on JsFiddle. Only inner (red) div is visible because there is no margin or padding set so inner div takes the whole space of .master div. That's clear.
I would like to set for .master div margins to 20px so I could do it this way:
.master div {
background: red;
margin: 20px;
}
But I would expect that I have both div visible (red and green) but in fact only red color is visible and green is visible only on left and right - JsFiddle.
I know how to solve it (in this case I can set padding for .master div to 20px I could do something like this:
.master {
padding: 1px 0;
}
and I'll have the same effect (or almost the same effect - 1px difference) as you see at JsFiddle or I could set padding for .master div instead of using margin for inner div
Questions:
Why simple adding margin for inner div doesn't make that margin is set as expected (both green and red visible) and why adding even small padding fix it?
Why behaviour for it is different for top and bottom margin and for left and right margin ?
Is this issue has any name?
Are there any other common cross-browser solutions?
If it is explained in external source you can also add link to external resource.
I'm a bit ashamed that I ask about such simple thing, but I always solve this using simple padding (as showed in the question) and it worked.
This effect is due to the "Collapsing Margins" specification. Here's the explanation from the W3C:
“In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.”
Margin collapse only occurs with vertical margins on adjacent or nested elements.
Answers to your questions:
Adding margins to the inner div causes a margin collapse with the margins of the outer div. They are combined into one margin. Setting a padding on the outer div gives it a block formatting context and separates the elements, therefore un-collapsing the margins.
Margin collapse only occurs on vertical margins.
The effect is called "collapsing margins".
The only cross-browser "solution" is to give the parent element a block formatting context by adding padding or overflow: auto/hidden.
See this article on SitePoint for more information