CSS margin issues when the container does not have a border - html

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.

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;
}

HTML border not affecting with float

So this is one of my CSS3 lines:
body{
width: 1500px;
border: 2px solid black;
text-align: left;
margin: 20px auto;
}
However, I have an Article in HTML, and when I write float:left on my CSS file, the border that's supposed to cover it stops right before the article starts, on the top.
Can anyone help me with this issue?
I want the border to surround everything.
Here is the clearfix snippet I use. Add this to the top of your css.
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
Like one of the commenters said. When you float an item, it disrupts the natural block level of the elements. What this means is, elements that are block level sit on top of each other, and elements that are inline, are well in a line.
So when you float items to the left, the parent div may collapse. To fix it, we add clearfix to the parent.
Honestly, you should post more of your code so we can see what's actually going on, but more than likely this will fix your issue.
Add clearfix class to your parent div (after adding it to your css)
What I mean is add it to whatever element your article is inside --
<div class ="clearfix">
<article> information </article>
</div>
I think this question has been answered all over SO, here is one post that will help- How do you keep parents of floated elements from collapsing?

Why is there a large gap between sections?

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.

CSS HTML issue - Toolbar extends too far

This is the code I am working with:
http://jsfiddle.net/BTYA7/
I can't work out why the toolbar (blue) is extending past the right side of the text box. There doesnt seem to be any padding or margin a miss.
I applied it in blue and pink to help show it:
.uEditorToolbar {background-color: blue;}
Can anyone give some guidance please?
The uEditorToolbar has two extra pixels of padding. width:100% sets the width not including padding. If need the padding, you can remove the width:100%, and the blue bar doesn't extend too far.
Is that what you need, or am I missing something.
The default layout style as specified by the CSS standard means that the width and height properties are measured including only the content, but not the border, margin, or padding. So the combination of width:100% and padding: 0 0 0 2px; is pushing the content out by 2px.
The default display for <ul> is block so the width:100% is probably unnecessary anyway.
If you remove the width:100% or the padding-left will fix the problem.
Alternatively, the CSS3 box-sizing property can be used to correct the layout by using box-sizing: border-box; (if all browsers you are targeting support the property).
There appears to be a 2px padding. If I remove the padding then it looks ok.
.uEditor .uEditorToolbar
{
list-style: none;
width: 100%;
height: 48px;
margin: 0;
padding: 0 0 0 2px;
}
http://jsfiddle.net/BTYA7/5/
Remove width:100%; padding: 2px; from the .uEditor .uEditorToolbar CSS class. It will work.

Where's the extra space coming from in these images?

I have a problem that I've replicated in various browsers.
I have divs with images each in a wrapper http://jsfiddle.net/QnVYL/. The wrapper has a 1px border and 5px padding. The image inside is sized to 100% width.
For some reason, though, there is more than 5px between the bottom of the image and the bottom of its wrapper. See how the padding does appear to be equal on all sides of the images? There seem to be 3 pixels added from... somewhere. Firebug doesn't let me know where from.
How can I get rid of the space? I can't use absolute positioning to fake the padding because I'm not yet sure I'll always know the exact height of the image.
Help is much appreciated!
It is a known issue. Try:
img {
display: block;
}
It's a line-height. Images are rendered as inline-block elements by default. The line-height makes sure that following text does not stick to the image like here:
<img...><br>foo
Both these fixes are useful, depending on the situation:
.imgContainer { line-height: 0; }
img { display: block; }
No extra spacing if you add img {display:block}
http://jsfiddle.net/lexy0202/uxMu9/2
Like I guessed it is the display attribut:
#container {
display:block;
width: 50%;
margin: auto;
margin-top: 100px;
}