Having a few elements with height:100vh, they show a vertical spacing when containing elements.
<section>
<p>A</p>
</section>
<section>
<p>B</p>
</section>
With the styling:
section {
height:100vh;
}
You can se an example here, the yellow background is visible above each element, even though the margin of the sections is set to 0.
How can the spacing be removed?
Just add overflow:auto; to .content>section
.content>section {
height: 100vh;
margin: 0;
overflow:auto;
}
alternatively you can remove the margin from all elements but then you have to edit both margin and padding to the element which may need it.
* {
margin:0;
padding:0;
}
Each browser will have a default user agent style sheet that will add some margin to all h1 elements for example, so you can remove it overriding the user agent style sheet rules for the elements you need.
h1 {
margin:0;
}
You can avoid these kind of issues by using a reset.css file to reset all different browsers default margin and padding for instance.
It's because h1 and p tags have default margin (or margin collapsing).
Margin collapsing
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing. by Mozilla MDN
JSFiddle - DEMO
You could do like this to remove the margin:
CSS:
h1, p {
margin:0;
}
Here is working example. Please change html,body with * in css rule.
* {
margin:0;
padding:0;
}
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 2 years ago.
My css margins doesn't behave the way I want or expect them to. I seems like my header margin-top affect the div-tags surrounding it.
This is what I want and expect:
...but this is what I end up with:
Source:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span>Title</span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
I have exaggerated the margin in this example. Default browser margin on h1-tag is somewhat smaller, and in my case I use Twitter Bootstrap, with Normalizer.css which sets default margin to 10px. Not that important, main point is; I can not, should not, want not change the margin on the h1-tag.
I guess it is similar to my other question; Why does this CSS margin-top style not work?. Question is how do I solve this specific issue?
I have read a few threads on similar problems, but haven't found any real answers and solutions. I know adding padding:1px; or border:1px; solves the problem. But that only adds new problems, since I do not want a padding nor a border on my div-tags.
There must be a better, best practice, solution? This must be pretty common.
Add overflow:auto to your #page div.
jsFiddle example
And check out collapsing margins while you're at it.
Add any one of the following rules:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
This is caused by collapsing margins. See an article about this behavior here.
According to the article:
The W3C specification defines collapsing margins as follows:
“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.”
This is also true for parent-child elements.
All the answers include one of the possible solutions:
There are other situations where elements do not have their margins collapsed:
floated elements
absolutely positioned elements
inline-block elements
elements with overflow set to anything other than visible (They do not collapse margins with their children.)
cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
the root element
Problem was the parent not taking into account children for height. Adding display:inline-block; did it for me.
Full CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
See Fiddle
Just add border-top: 1px solid transparent; to your #page element.
From w3.org
Two margins are adjoining if and only if:
- no line boxes, no clearance, no padding and no border separate them
Add the following rule:
overflow: hidden;
This is caused by collapsing margins. See an article about this behavior here.
According to the article:
If a parent element does not have any top padding or less top margin then its first child, then elements are rendered in a way that makes the parent element appear to have the child element's margin. So this can happen anywhere on a page where these conditions are met, but it tends to be most obvious at the top of a page.
The solutions in the other answers didn't work for me. Transparent borders, inline-block, etc., all caused other problems. Instead, I added the following css to my ancestor element:
parent::after{
content: "";
display: inline-block;
clear: both;
}
Depending on your situation, this may cause its own problems because it adds extra space after the last child element.
My approach when I was making styles for XenForo 2.1, but it should be useful for you:
(Please replace those LESS variables to your actual values. Also, the absolute value of minor margins shall be as same as the height of before-after pseudo elements.)
// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * #xf-lineHeightDefault * #xf-fontSizeSmall - #xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * #xf-lineHeightDefault * #xf-fontSizeSmall - #xf-borderSizeMinorFeature);}
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 2 years ago.
My css margins doesn't behave the way I want or expect them to. I seems like my header margin-top affect the div-tags surrounding it.
This is what I want and expect:
...but this is what I end up with:
Source:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span>Title</span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
I have exaggerated the margin in this example. Default browser margin on h1-tag is somewhat smaller, and in my case I use Twitter Bootstrap, with Normalizer.css which sets default margin to 10px. Not that important, main point is; I can not, should not, want not change the margin on the h1-tag.
I guess it is similar to my other question; Why does this CSS margin-top style not work?. Question is how do I solve this specific issue?
I have read a few threads on similar problems, but haven't found any real answers and solutions. I know adding padding:1px; or border:1px; solves the problem. But that only adds new problems, since I do not want a padding nor a border on my div-tags.
There must be a better, best practice, solution? This must be pretty common.
Add overflow:auto to your #page div.
jsFiddle example
And check out collapsing margins while you're at it.
Add any one of the following rules:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
This is caused by collapsing margins. See an article about this behavior here.
According to the article:
The W3C specification defines collapsing margins as follows:
“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.”
This is also true for parent-child elements.
All the answers include one of the possible solutions:
There are other situations where elements do not have their margins collapsed:
floated elements
absolutely positioned elements
inline-block elements
elements with overflow set to anything other than visible (They do not collapse margins with their children.)
cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
the root element
Problem was the parent not taking into account children for height. Adding display:inline-block; did it for me.
Full CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
See Fiddle
Just add border-top: 1px solid transparent; to your #page element.
From w3.org
Two margins are adjoining if and only if:
- no line boxes, no clearance, no padding and no border separate them
Add the following rule:
overflow: hidden;
This is caused by collapsing margins. See an article about this behavior here.
According to the article:
If a parent element does not have any top padding or less top margin then its first child, then elements are rendered in a way that makes the parent element appear to have the child element's margin. So this can happen anywhere on a page where these conditions are met, but it tends to be most obvious at the top of a page.
The solutions in the other answers didn't work for me. Transparent borders, inline-block, etc., all caused other problems. Instead, I added the following css to my ancestor element:
parent::after{
content: "";
display: inline-block;
clear: both;
}
Depending on your situation, this may cause its own problems because it adds extra space after the last child element.
My approach when I was making styles for XenForo 2.1, but it should be useful for you:
(Please replace those LESS variables to your actual values. Also, the absolute value of minor margins shall be as same as the height of before-after pseudo elements.)
// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * #xf-lineHeightDefault * #xf-fontSizeSmall - #xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * #xf-lineHeightDefault * #xf-fontSizeSmall - #xf-borderSizeMinorFeature);}
When I apply a margin to an element rather than extending its containing element it creates margin outside of it. So with the code below there is a space between the divs's coloured background.
Why does this happen? It would seem more logical to me for the containing div to be expanded (so im the code example there would be no white space and the coloured 'bars' would be fatter).
Is there a way with CSS I can stop it happening?
http://codepen.io/anon/pen/KrJgm
<div class="one">
<p>Text</p>
</div>
<div class="two">
<p>Text</p>
</div>
<div class="three">
<p>Text</p>
</div>
.one {
background: red;
}
.two {
background: green;
}
.three {
background: gold;
}
UPDATE Sorry I dont think I was clear. I understand that the margin on the paragraph tag is causing the white space but what I dont understand is why the margin isnt 'pushing back' the containing div (so it would look the same as if a padding had been applied to the containing div).
As you updated your question, I think whats troubling you is Collapsing Margins
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.
Solution? Use overflow: auto; on the parent element.
Demo
If you are speaking about the white space in the demo as I am not seeing any margins used in your code.. Than below is the answer..
You are not resetting browser default styles..
Demo
* {
margin: 0;
padding: 0;
outline: 0; /* Optional */
}
Here I am using * selector which selects all the elements, and am using margin: 0; and padding: 0; to reset the browser defaults..
Some do not use * selector as they find it bad from a performance point of view, so if that's the case you can use CSS Stylesheet Reset
If you are using margins in your code than please refer this answer...
If you are aware of the CSS Box Model, border, padding and margin are counted outside of the element and not inside.
So in this case you might like to have padding and not margin.
Though, you can alter the behavior of CSS Box Model by using box-sizing property set to border-box or padding-box which will count the border and padding inside of the element rather counting outside of it..
The paragraph tag has margin on it by default. So if you want to get rid of the margin you need to set it to 0 and to expand the paragraph container you need add padding (pads inside of the container), margin is used for outside of the container
p {
margin: 0;
padding: 10px 0
}
http://codepen.io/anon/pen/Bqgyd
I was working on this CSS, I have wrapped an article inside a div. I have given percentage width for both, and padding for the div. My padding seem "not applied" until I add border to the article. You can see the difference by commenting the border applied to the article. My article height shrink. Why is this happening?
<style>
body{
margin:100px;
}
.content{
width:100%;
padding:.9746589%;
background:green;
}
.content>article{
width:100%;
background:yellow;
border:1px solid red;
}
</style>
<div class="content" role="main">
<article>
<p>This is my text!</p>
</article>
</div>
There are default margins in your p element that are collapsing with your article element. When you add a border to your article, it prevents that collapse from happening and causes it to contain the p element and its default margins.
Your .9746589% padding is applied in both situations, but since you put it on .content it isn't actually affected by the margin collapse between its article and the p that's inside it. If you were to remove that as well as the border, though, then the margins would collapse across all elements and the green background would completely disappear. In other words, just like how your border is blocking margin collapse between article and p, your padding is also blocking margin collapse between .content and article and its contents.
Lastly, margins only collapse vertically, so setting width will never make a difference.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 2 years ago.
My css margins doesn't behave the way I want or expect them to. I seems like my header margin-top affect the div-tags surrounding it.
This is what I want and expect:
...but this is what I end up with:
Source:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span>Title</span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
I have exaggerated the margin in this example. Default browser margin on h1-tag is somewhat smaller, and in my case I use Twitter Bootstrap, with Normalizer.css which sets default margin to 10px. Not that important, main point is; I can not, should not, want not change the margin on the h1-tag.
I guess it is similar to my other question; Why does this CSS margin-top style not work?. Question is how do I solve this specific issue?
I have read a few threads on similar problems, but haven't found any real answers and solutions. I know adding padding:1px; or border:1px; solves the problem. But that only adds new problems, since I do not want a padding nor a border on my div-tags.
There must be a better, best practice, solution? This must be pretty common.
Add overflow:auto to your #page div.
jsFiddle example
And check out collapsing margins while you're at it.
Add any one of the following rules:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
This is caused by collapsing margins. See an article about this behavior here.
According to the article:
The W3C specification defines collapsing margins as follows:
“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.”
This is also true for parent-child elements.
All the answers include one of the possible solutions:
There are other situations where elements do not have their margins collapsed:
floated elements
absolutely positioned elements
inline-block elements
elements with overflow set to anything other than visible (They do not collapse margins with their children.)
cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
the root element
Problem was the parent not taking into account children for height. Adding display:inline-block; did it for me.
Full CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
See Fiddle
Just add border-top: 1px solid transparent; to your #page element.
From w3.org
Two margins are adjoining if and only if:
- no line boxes, no clearance, no padding and no border separate them
Add the following rule:
overflow: hidden;
This is caused by collapsing margins. See an article about this behavior here.
According to the article:
If a parent element does not have any top padding or less top margin then its first child, then elements are rendered in a way that makes the parent element appear to have the child element's margin. So this can happen anywhere on a page where these conditions are met, but it tends to be most obvious at the top of a page.
The solutions in the other answers didn't work for me. Transparent borders, inline-block, etc., all caused other problems. Instead, I added the following css to my ancestor element:
parent::after{
content: "";
display: inline-block;
clear: both;
}
Depending on your situation, this may cause its own problems because it adds extra space after the last child element.
My approach when I was making styles for XenForo 2.1, but it should be useful for you:
(Please replace those LESS variables to your actual values. Also, the absolute value of minor margins shall be as same as the height of before-after pseudo elements.)
// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * #xf-lineHeightDefault * #xf-fontSizeSmall - #xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * #xf-lineHeightDefault * #xf-fontSizeSmall - #xf-borderSizeMinorFeature);}