This question already has answers here:
Why does my header moves down when I set it fixed?
(1 answer)
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 2 years ago.
I've read that:
MDN
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
So, what can cause this behaviour?
* {
margin: 0;
padding: 0;
}
.block {
width: 500px;
height: 500px;
background: rgba(4, 127, 214, .3);
position: absolute;
}
.block_2 {
margin-top: 500px;
width: 500px;
height: 500px;
background: red;
}
<div class="block"></div>
<div class="block_2"></div>
That margin-top should move my red element down in theory... Why doesn't this happen?
Related
This question already has answers here:
Why does this page scroll?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I somehow lost track of what I am doing wrong here:
I got a simple content <div>.
it has a height of 100% - 30px and a margin-top of 30px, ...so together they add up to 100% of the parent elements height.
the parent element is the body with height set to 100vh. No margins, no paddings.
However I do still get a y-scroll bar on the right. Can anyone explain to me, why that is?
I put a minimal example here to show what I mean:
https://jsfiddle.net/kemo8npa/4/
Can someone explain to me, why i get the scrollbar?
html {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin: 0;
padding: 0;
background-color: purple;
}
.content {
height: calc(100% - 30px);
margin-top: 30px;
background-color: blue;
width: 300px;
}
<div class="content">
content
</div>
edit: changed example to be more minimal.
The margin-top of .inner adds 30px outside of the element, so the sum is 100% height again.
You could use padding-top instead.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
My issue
Usually when using percentages inside a margin property the browser uses the width of the nearest positioned ancestor as reference length. However I'd like to set the margins of my element relative to its parent's height. Is that somehow possible? Or am I stuck with a JavaScript solution?
An example
Specifically I'd like the following:
.child {
height: 1em;
width: 1em;
background: red;
display: inline-block;
margin: calc((100% - 1em) / 2);
/* margin: calc((5em - 1em) / 2); In absolute units */
/* margin-sizing: height; If only there was some magical property like this... */
}
.container {
background: green;
height: 5em;
width: 15em;
position: relative;
}
<div class="container">
<div class="child"></div>
Something
</div>
To look like this:
I know that I could use absolute units in the example above. However I may not always know the exact height of the parent in a more complex or dynamic example. And I'd like to avoid JavaScript for this.
Edit
I should clarify something. My end goal is that the red div in the example above is centered vertically but also has the same distance to the left as it has to the top/bottom. Obviously I'm not bound to specifically use the margin properties. But the outcome of your solution should be the same.
If you can just use margin or padding then you are stuck because the top and bottom of these properties are relative to the parent's width when used as percentages (as you mentioned already).
The only solution I see is keep the parent element in position: relative and use top & bottom to the child element (which is in position: absolute) to use in percentages.
.child {
height: 1em;
width: 1em;
background: red;
display: inline-block;
--calc: calc((100% - 1em) / 2);
top: var(--calc);
left: var(--calc);
right: var(--calc);
bottom: var(--calc);
position: absolute;
/* margin: calc((5em - 1em) / 2); In absolute units */
/* margin-sizing: height; If only there was some magical property like this... */
}
.container {
background: green;
height: 5em;
width: 15em;
position: relative;
}
<div class="container">
<div class="child"></div>
Something
</div>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 3 years ago.
I have a basic HTML page that contains one div in my body: Container. There is a background image that I'm using to cover the entire width of the page. However, the image doesn't cover the entire page instead it leaves a margin around the top, bottom, left, and right.
In addition, I added an overlay using Container::After, but it also doesn't cover the entire image - it leaves a margin too.
Solutions I tried:
Doing some research, I found that HTML displays elements using inline. So, I tried changing the display to flex. In addition, I even tried to float my container to the left. However, nothing worked. The only thing that worked was adding negative margins to my container and the whitespace was removed. However, when I added an h2 element - the whitespace came back.
I'm not sure what is occurring here? Any suggestions would be great. Below is my jsfiddle:
https://jsfiddle.net/fun_code11/zcqm1w5u/2/
.container{
background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80");
background-size: cover;
background-repeat: no-repeat;
position: relative;
height: 600px;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
}
.container::after{
content: " ";
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
You should remove the top margin from the h2. That causes the whitespace. You can do sth like h2 { margin-top:0 }
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 3 years ago.
I have added this code to my website but there is no effect:
.wp-block-column:not(:first-child) {
position: sticky;
top: 0px;
}
Here I share a fiddle to demonstrate: https://jsfiddle.net/9xb0q8fw/1/
Screen must be at least 790px wide.
I would like that the right column stays sticky until the left column has passed while scrolling down.
But position:sticky; is not taking effekt.
Thank you for any help!
The sticky element in your fiddle has no height setting - use a set height to avoid that, then the sticky position works:
https://jsfiddle.net/rocz5nL1/
position: sticky only works when the parent element around it has a larger height, and when it reaches the end of that element it "bottoms out". So if the wrapping parent element is the same height as the sticky element, it never gets a chance to become sticky. See this demo for a working example of what I mean.
.container {
height: 900px;
}
.content-half {
float: left;
width: 50%;
background: #EEE;
}
.i-am-sticky {
position: sticky;
top: 0px;
padding: 10px;
margin: 10px;
border: 1px solid blue;
background-color: #333;
color: #FFF;
}
<div class="container">
<div class="content-half">
<div class="i-am-sticky">Sticky - not working b/c parent is too short</div>
</div>
<div class="content-half" style="height: 500px;">
<div class="i-am-sticky">Sticky - works b/c parent has height!</div>
</div>
</div>
This question already has answers here:
CSS: Margin-top when parent's got no border
(7 answers)
Impact of border property on top margin
(3 answers)
Why does this CSS margin-top style not work?
(14 answers)
Margin on child element moves parent element
(18 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 years ago.
I have a p element with a paragraph of text inside a div element. Without a border on the div element, the p element is positioned in the top-left corner, but if I add a border to the div element it "pushes down" the paragraph from the top edge (not the left edge, however).
Why does this occur?, and is there a method of preventing this?
html,
body {
height: 100%;
}
div {
min-width: 300px;
max-width: 500px;
min-height: 200px;
max-height: 450px;
height: 100%;
background-color: Pink;
}
div.first {
border-width: 2px;
border-style: solid;
border-color: Black;
}
p {
width: 75%;
height: 75%;
background-color: Black;
color: White;
}
<div class="first">
<p class="one">Paragraph one text...</p>
</div>
<div class="second">
<p class="two">Paragraph two text...</p>
</div>
UPDATE:
You can prevent this movement by adding margin: 0; to the style of your p tag. See below for an explanation of how and why this happens.
The reason your p tag gets pushed down is because of margin collapsing (or, rather, margins not collapsing when you set a border).
See this page for a more in-depth explanation of how it works. From that page:
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
Basically, your margins are getting collapsed by the browser when you don't have a border set, yet they are calculated when you do set that border.
For ways to prevent the browser from collapsing margins, see this question. From that question (first part originally quoted from this other question):
Found an alternative at Child elements with margins within DIVs You can also add:
.parent { overflow: auto; }
or:
.parent { overflow: hidden; }
This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:
.parent {
padding-top: 1px;
margin-top: -1px;
}
This is related to margin collapse.
The margin on the <p> element collapses with it's parent.
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Note that:
Adjoining vertical margins collapse... if and only if... no line boxes, no clearance, no padding and no border separate them.
In order to prevent margin collapse on both of your examples, you can use methods other than border. For example, overflow:auto:
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
html,
body {
height: 100%;
}
div {
min-width: 300px;
max-width: 500px;
min-height: 200px;
max-height: 450px;
height: 100%;
background-color: Pink;
overflow: auto;
margin: 0 0 1em;
}
div.first {
border-width: 2px;
border-style: solid;
border-color: Black;
}
p {
width: 75%;
height: 75%;
background-color: Black;
color: White;
}
<div class="first">
<p class="one">Paragraph one text...</p>
</div>
<div class="second">
<p class="two">Paragraph two text...</p>
</div>
See also:
Mastering margin collapsing.
What You Should Know About Collapsing Margins.