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.
Related
This question already has answers here:
Place boxes inside ul in center, but align them left
(1 answer)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 11 months ago.
I have a block with inline divs wrapping inside.
I want to center that block inside it's container using margin auto (or any other ways).
Unfortunately it doesn't work.
There is a solution by using text-align center, but i don't want the inline-divs in the last line to be in the center.
or in other words:
how to get rid of the yellow marked space?
There was a similar question 6 years ago that didn't get a good solution, I ask again because css has advanced since then
span{
display:inline-block;
width:150px;
height:100px;
background-color:red;
margin:10px;
}
.inside{
margin:auto;
width:90%;
background-color:blue;
}
.outside{
border:solid 1px black;
}
<div class="outside">
<div class="inside">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
```
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
CSS: Width in percentage and Borders
(5 answers)
Two inline-block elements, each 50% wide, do not fit side by side in a single row
(9 answers)
Closed 1 year ago.
I'm trying to keep these two divs side by side. I've set 50% width for them but still they are under eachother. What's wrong?
div{
border: 1px solid;
display: inline-block;
width: 50%;
}
<form>
<div>
two
</div>
<div>
one
</div>
</form>
I don't want to use flex display. Noted that, it would be ok if I set 49% for the width property, but doesn't look standard to me. Also as you know, that 1px border has nothing to do with the issue.
How can I keep them next to each other?
Thanks in advance
There are two issues here:
You need to set a box-sizing so that the width of the element includes the border
You need to remove the newline between the divs since it takes an extra space
div{
border: 1px solid;
display: inline-block;
box-sizing: border-box;
width: 50%;
}
<form>
<div>
two
</div><!-- you need to remove space here --><div>
one
</div>
</form>
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.