Why is there a large gap between sections? - html

I've been creating a page for the last few days and have had this odd gap between the sections I've used. I have them contained in a div named wrapper but even within the div there is about a line's height gap between the top of the div and the start of the section. Further down the page there are also large gaps between the sections.
I can't seem to find a way to change this without messing with the top-margin but even then that is quite a 'hacky' way of doing it.
Here's the code to show I really haven't done anything (as far as I can tell) to the attributes.
section{
height:10px;
min-height: 400px;
background: rgba(0, 0, 0, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}
#wrapper{
padding: 10px;
}
Here's the JSFiddle if that helps explain what I mean: http://jsfiddle.net/L6qeyhsv/
I thought it may be the default values of section but that wouldn't explain the gap between the top of section at the top of #wrapper
Thanks

I have updated your fiddle,
You needed to remove the margin reset your <h1> to 0. A good way to test this is by using developer tools, highlighting the element and seeing what default margins and paddings are applied to the element.
Fiddle: https://jsfiddle.net/L6qeyhsv/5/

You have to reset default <h1> margin.
section h1 {
margin: 0;
}
Fiddle: http://jsfiddle.net/L6qeyhsv/3/
A side note, you can't have multiple ids with the same name, they must be unique.
Reference: Element identifiers: the id and class attributes

If by chance you want to avoid removing the margin from your h1 (which honestly you can and should remove and replace with padding either way), you can use a common clearfix hack to solve this:
section:before,
section:after {
content: " ";
display: table;
}
This works by essentially adding "first" and "last" elements which aren't affected by margin collapse.
A longer explanation can be found here.

Related

Removing unwanted white boarder surrounding full page

My site is https://ized.online
I have tried setting the margin and padding of h1 and my divs to 0px in my CSS, but the border remains, and it seems like its either my main container div or the CSS properties of or , as inspecting the element links back to both of them in a non-descriptive form, and similarly trying to set margin or padding to 0 gives no result.
What would you suggest to remove the white boarder surrounding my page?
Each browser has its own set of preset css rules, on divs, body, etc. try using something like https://github.com/csstools/sanitize.css which removes them, or simply use
body{ margin: 0 }
It seems you need to remove default margins from the body: body{margin:0;}
In css you can see
border: (px style color)
And that should solve the issue if you delete that settings.
Also, border: none on the element should be an option, but probably you missed the border settings.
Bellow is CSS you need. I suggest you to look up how position: absolute works with properties top, bottom, left, right.
.text2 {
position: absolute;
z-index: 1;
bottom: 0;
color: grey;
}
body {
margin: 0;
}

Negative margin breaks float

While I was working on something, I noticed a very strange behaviour which I couldn't explain. The only difference between the two scenarios is that the <i>s in the second example have margin-top set to -10px instead of -9px. I use the negative margin to shift all of the boxes top with the same ammount.
main, aside {
width: 100%;
padding: 20px 0 10px;
margin-bottom: 10px;
overflow: hidden;
background: lightblue;
}
main i, aside i {
float: left;
display: block;
width: 10px;
height: 10px;
margin: -9px 0 0 5px;
background: orange;
}
aside i {
margin-top: -10px;
}
<main>
<i></i>
<i></i>
<i></i>
</main>
<aside>
<i></i>
<i></i>
<i></i>
</aside>
With only that tiny little change of the top margin they stack on top of each other instead of next to each other. I can't understand what is causing it. I confirmed this behaviour with Gecko and WebKit based browsers.
I'll try an explanation (or better called, an interpretation) for the abnormal scenario. I can't be sure that what I interpret is correct because the specs have a lot of rules and also the browser implementation may not be completely according to the specs.
The first float box is positioned left most in the parent and shifted 10px upwards (because of the -10px margin). When the rendering searches for a position for the second box, it starts looking at height 0 of the parent and goes from right to left until it encounters another float, but it doesn't because the first float was shifted completely out of the parent, so it goes all the way to the left. If it happens like this, the 9 float positioning rules are still respected (more or less, again it depends on how the developers interpreted some things).
Also consider this disclaimer from the margins section:
Negative values for margin properties are allowed, but there may be
implementation-specific limits.
You should understand from it that negative margins should be used at your own risk.
My recommendation is to give up on the negative top margin because it's, let's say, problematic, and use instead some shifting with position: relative (or don't shift at all).
Ref.:
https://www.w3.org/TR/CSS2/visuren.html#float-position
https://www.w3.org/TR/CSS2/box.html#margin-properties

CSS margin issues when the container does not have a border

More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.

Margin not working with float elements

On my web page, I have a logo and a menu that make up header elements and a hero unit under it.
Now I want to give it some bottom margin so there is enough negative space between
header and hero unit but this bottom margin (100px) is not applying.
Same thing if I try to give top margin from hero unit.
.header {
width: 95%;
margin: 20px auto 100px;
}
Here is my working sample JS BIN
Adding a div under it with:
.someclass {
clear: both;
}
would help. But even easier is:
.header {
width: 95%;
margin: 20px auto 100px;
overflow: hidden;
}
If you add the overflow: hidden; the browser will be forced to calculate the size of the elements within, despite them being floated. When the size is calculated, it also knows where to start the margin-bottom.
One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared.
Source
The difference between auto and hidden in this case, is that with hidden, it will hide everything that overflows, when it doesn't have enough room anymore, and with auto, it will create a scrollbar.
EDIT:
Since this question apparently is still active, I'll add the most common way of solving this in the present day:
.header:after {
clear: both;
height: 0;
width: 100%;
content: '';
display: block;
}
This is the same as the first method, but then without having to add another element. This is the way to go if setting overflow is not an option (or even if it is an option, this would be better).
When I first posted this answer, it wasn't an option as it was not supported by IE 6 / 7, which were still broadly used back then.
you could add a clearfix to your header or wrapper tag. This is useful bit of css to include in your file. More about the clearfix can be found here
http://css-tricks.com/snippets/css/clear-fix/
I think it's a problem in your margin attribute order.
If I change your property from: 20px auto 100px; to: 20px 0px 100px 0px then I have bottom space appearing.

div outer borders

I'm trying to create a div header that extends the entire length of the page, but I keep getting a small white outer border on all divs so that the entire page has a thin white border around the outside. I'd like for the divs to extend to the very edge.
I've tried a few different css options but none seemed to have worked. E.G (Not all at once)
div
{
padding:0;
margin:0;
border:0;
margin: 0px auto 0px auto;
}
That sounds like the default margin/padding on the body. Some browsers uses margin, some (Opera) uses padding, so set both:
body { margin: 0; padding: 0; }
In general, you should be using some form of css reset or normalization. I'd check out this one, because it's by the master genius of css resets himself, Paul Irish.