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).
Related
This question already has answers here:
margin from heading pushes div down
(2 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
The margin of an h2 element in my page is displacing the whole body down.
This doesn't seem normal as the h2 element is contained in a div container.
How can I fix this ?
Put this at the top of your css file:
body{
margin: 0;
padding: 0;
{
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 terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS: Margin-top when parent's got no border
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
is it a bug? margins of P element go outside the containig div
(3 answers)
Closed 4 years ago.
That's the best title I could come up with, sorry if it's not clear.
I have a table, which has a top-margin. Around that table I have a div, which has a blue background. This blue background only affects the table itself, and doesn't include the margin area (which seems weird considering the margin area should still be inside that div). Yet if I add a border to the div, the whole area (including the margin) gets that background.
#table_div {
background-color: blue;
border-color: red;
border-width: 5px;
border-style: solid;
}
#main_table {
margin: auto;
margin-top: 100px;
}
Is there any particular reason on why this happens?
To get a background without having to use a border I replaced the margin of the table to the padding of the div. I created this post not to ask how to get it to work, but really to understand what is happening and why it is happening
Example: https://jsfiddle.net/jxbmg4vx/1/
Remove the border lines to see what I mean
This is the CSS feature.
I have two solutions.
#table_div {
background-color: blue;
overflow:hidden;
}
or
#table_div {
background-color: blue;
padding-top:200px;
}
#main_table {
margin: auto;
}
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.
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.