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
Related
Every html element is a box shape element.
Each box is surrounded by boundaries - padding, border, margin.
--
margin gives white space between two elements.
Why would a box require three boundaries? Would margin that creates white space between any two boxes do not suffice?
Not if you also need a border, or some padding.
Though it is true that both margin and padding create space, there is a difference between where they create space. And that difference is the border.
A border, as the word already implies, is to create a visible border. Padding creates space between said border and the content within. But padding can also be used to create some room around an element when it has a background, for example.
To better illustrate the differences, I'll create a couple of snippets:
This snippet has no border, margin or padding, so no spacing.
.row {
background: red;
}
.column {
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This snippet has margins, giving it some space around the element, which is evident because of the background colors.
.row {
background: red;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This example has both a margin and a border, giving you a wider range of coloring options, as well as more space. Yet, you would be unable to give the different spaces a different color with just a margin.
.row {
background: red;
}
.column {
margin: 10px;
border: 5px solid purple;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This last example has it all. As you can see, the padding creates space within the box, inside of the border. Added to that, you can also see more of the background color of the element.
.row {
background: red;
}
.column {
margin: 10px;
border: 5px solid purple;
padding: 20px;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
Though you could create just as much space between the elements with margin: 35px; you could not get this (* cough *) beautifully colorful display.
You need a border because sometimes people want a visible border between elements, not white space.
You need padding because people want space between the content and the border and between the border and the next element.
Each one of those properties controls a different aspect of the box.
Margin
The margin clears an area around an element (outside the border). The
margin does not have a background color, and is completely
transparent. The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin property
can also be used, to change all margins at once.
Padding
The padding clears an area around the content (inside the border) of
an element. The padding is affected by the background color of the
element. The top, right, bottom, and left padding can be changed
independently using separate properties. A shorthand padding property
can also be used, to change all paddings at once.
Border
The CSS border properties allow you to specify the style, size, and
color of an element's border.
All three properties together give you great flexibility in styling HTML elements. If you only had margin you would only be able to create space between elements. Plus, padding gives you the ability to create "separation" between elements without collapsing margins.
Here's a good reference for more details: When to use margin vs padding in CSS
Elements don't require to have any of the above. What you see is just an illustration about the box-model of the element which just tells you that there is no margin, padding or border.
Important difference between marginand padding is that margin pushes other elements away from the current element, while padding defines the space between the contents of an element and its' outline.
Border is simply a border. It creates a line as a visual separator between elements, and is not really intended to determine spacing between them.
A good explanation is given on the w3schools website.
Margins and padding have two different uses:
Margin collapse on each other while padding doesn't. Two elements side-by-side, each having margin: 10px will be 10px apart. But if they instead had padding: 10px, the would be 20px apart. Edit I misspoke. I was trying to refer to margin-collapsing, which happens on margin-top and margin-bottom at times. More can be read here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing; and additional discussion here: When to use margin vs padding in CSS
When applying a border, padding will be applied inside the border, pushing it away from the element. Margins are applied outside the border.
Styling such as background-color will be applied to padding, but not to margin.
With margins, negative values are allowed. Not so with padding.
From MDN:
Padding
The padding area extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the padding edge, and its dimensions are the padding-box width and the padding-box height.
Margin
The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.
When do you use <p>? I know it could be used for text, but do you need to write it if you have already -for example- <article>? or can I just use <article> alone then?
Also why do you need to use margin instead of padding on <p>? I tried already with padding, but that doesn't work. If I tried it with margin it works well.
The HTML <p> tag is used for defining a paragraph. For example the two sections of your question are paragraphs
Also to add a margin is the space outside something, whereas padding is the space inside something.
For example:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 10px;
padding: 20px;
}
This leaves a 10-pixel width space around the secondary header and the header itself is fat from the 20-pixel width padding.
Use margin to separate the content from things outside it.
Use padding to move the content away from the edges of the block.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
I have very simple code for beginning:
<!doctype html>
<head>
</head>
<body>
<style>
.master {
background: green;
}
.master div {
background: red;
}
</style>
<div class="master">
<div>
abc
</div>
</div>
</body>
</html>
I put it also on JsFiddle. Only inner (red) div is visible because there is no margin or padding set so inner div takes the whole space of .master div. That's clear.
I would like to set for .master div margins to 20px so I could do it this way:
.master div {
background: red;
margin: 20px;
}
But I would expect that I have both div visible (red and green) but in fact only red color is visible and green is visible only on left and right - JsFiddle.
I know how to solve it (in this case I can set padding for .master div to 20px I could do something like this:
.master {
padding: 1px 0;
}
and I'll have the same effect (or almost the same effect - 1px difference) as you see at JsFiddle or I could set padding for .master div instead of using margin for inner div
Questions:
Why simple adding margin for inner div doesn't make that margin is set as expected (both green and red visible) and why adding even small padding fix it?
Why behaviour for it is different for top and bottom margin and for left and right margin ?
Is this issue has any name?
Are there any other common cross-browser solutions?
If it is explained in external source you can also add link to external resource.
I'm a bit ashamed that I ask about such simple thing, but I always solve this using simple padding (as showed in the question) and it worked.
This effect is due to the "Collapsing Margins" specification. Here's the explanation from the W3C:
“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.”
Margin collapse only occurs with vertical margins on adjacent or nested elements.
Answers to your questions:
Adding margins to the inner div causes a margin collapse with the margins of the outer div. They are combined into one margin. Setting a padding on the outer div gives it a block formatting context and separates the elements, therefore un-collapsing the margins.
Margin collapse only occurs on vertical margins.
The effect is called "collapsing margins".
The only cross-browser "solution" is to give the parent element a block formatting context by adding padding or overflow: auto/hidden.
See this article on SitePoint for more information
I have two divs next to each other - one fixed, and one fluid. However, whenever I apply a margin-top to a paragraph within the fluid div, it doesn't fill the whole height of the div and also pushes the fixed div next to it down with it. Unfortunately, I cannot use overflow:auto to fix this because I require the fluid div to have overflow: visible for a very specific need. Weird, I know, but I'm sure there must be a solution to this. However I've been trying for hours with no luck.
Here's a demo of the problem I'm having. I've included an explanation within the divs also: http://jsfiddle.net/LejbU/
<div class="left">
<p>This div has a fixed width of 300px.<p>
</div>
<div class="right">
<p class="withMargin">Test</p>
</div>
-
.left {
background-color: yellow;
width: 300px;
height: 100%;
float: left;
}
.right {
background-color: pink;
height: 100%;
margin-left: 320px;
overflow: visible;
}
p {
margin: 0;
padding: 10px;
color: black;
}
p.withMargin {
margin-top: 100px;
margin-bottom: 100px;
}
That's because of the collapsing margins of CSS Box model definition:
CSS 2.1 8.3.1 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.
From the definition:
Margins of inline-block boxes do not collapse (not even with their
in-flow children).
So change the display of p.withMargin to inline-block to avoid this behavior.
Demo: http://jsfiddle.net/LejbU/2/
You've fallen victim to collapsing margins (MDN).
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.
In your case:
Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
There are a couple ways to get around this, I just use padding instead to change the layout as I require without changing other properties I consider more dangerous. In this scenario: http://jsfiddle.net/rgthree/LejbU/1/
p.withMargin {
padding-top: 100px;
padding-bottom: 100px;
}
add this display:inline-block; to p.withMargin
Another solution I found. Create a new div WITHIN the right div and apply the following css to the new div:
.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}
Example: http://jsfiddle.net/62ueY/
This might be due to margin collapsing and I know about margin collapsing, at least how it affects adjacent elements, but I don't understand how it works on nested elements when negative margins are involved.
For example, in this markup and accompanying CSS:
Markup
<div class="parent">
<div class="child">
Child 1
</div>
</div>
<div class="parent">
<div class="child negative">
Child 1
</div>
</div>
CSS
body {
background: white;
padding: 45px;
}
.parent {
border: 1px solid black;
margin-bottom: 10px;
}
.negative {
margin-bottom: -1px;
}
Live example here.
When I inspect the height of the second .parent div, I notice it is 1 pixel less than the first one. This has happened because of the negative margin on the .negative element inside it. I had a quick look at W3C and couldn't find an explanation for this behavior.
Could someone please explain what's happening here and also provide me with a link to the W3C spec section about it?
This might be due to margin collapsing and I know about margin collapsing, at least how it affects adjacent elements, but I don't understand how it works on nested elements when negative margins are involved.
Section 8.3.1 has all the details. It also covers the behavior of adjoining margins between nested boxes, as well as negative margins.
However, what you're seeing here is not the effect of margin collapse because you have negated it with a border: 1px solid black declaration in your .parent rule. That means having a border there prevents your .parent margin from collapsing with your .child.negative margin altogether.
Rather, this is simply how negative margins work. This is covered in various sections of the visual formatting model, but it's most succinctly and directly addressed in the beginning of Section 11, which summarizes it thus:
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
...
A descendant box has negative margins, causing it to be positioned partly outside the box.
So what's happening here, instead, is:
The absolute value of the .child.negative element's negative margin is subtracted from the .parent element's actual height (by 1px).
As a result, the .child.negative element itself overflows .parent (because its own height is not changed and the default overflow for any div is visible).
Since margin collapse does not take effect here, the margin-bottom: 10px in your .parent is unaffected. Note that while any subsequent elements in normal flow will be shifted up by 1px, this is mainly due to the negative margin of your .child.negative element; in other words, a side effect of step 1.
And that's all there is to it.
when you are using .negative { margin-bottom: -1px; } then it will moved at the top. see this example.
please refer the following link you understand easily.
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
body {
background: white;
padding: 45px;
}
.parent {
border: 1px solid black;
margin-bottom: 10px;
min-height: 30px;
}
.negative {
margin-bottom: 20px;
}
conclusion:
For e.g. In your case i have to added min-height:30px to parent class so that it remains fix. if moved only if you add positive margins to negative class. It just because you can see results in above figure that tells all what you need is.
see the cssdesk link click here cssdesk
Hope, it will helps you. Cheers. !!
Margins of first and last elements will apply to outer element when the outer element doesn't have border, padding and content, instead of it self.
In your case, parent node has border, so margin collapsing won't apply in this case. As you have margin-bottom = -1px for the child node inside, when calculate the outer height of the child node will be the height of its content + padding + border-width + margin. So it will be 1px less when measuring from outside. That's why the height of parent node will be 1px less than the upper example. To see it more clearly, you may apply a background to the child node, say yellow, you will find that the child node will overlap the border of the parent node.
But if you remove the border of the parent node, it will be a total different situation.
For instance to explain margin collapsing, say you have
<div style="background-color:black">
<div style="height:10px; background-color:white; margin-top: 10px"></div>
</div>
You will not see a black box of 10px height, as the outer node will be considered to have a 10px margin on top, and the inner one's margin is ignored. And for negative situation, the outer margin will decrease.
Quote from spec:
When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.
For more info:
https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing