I have a problem with margin-top and margin-bottom for some elements inside a floated div.
It's a column div floated to the right (I have also 2 other column divs floated to the left)
Demo here:
http://jsfiddle.net/zTb3g/
I need the "float" to adjust columns in the page, but the margin-top and margin-bottom don't work in some of the elements (ex: b, label, a), yet it works normally for other elements (ex: p, input).
I tried a lot of clearing styles in different places of the markup. Hope someone can help.
Thanks
You have to set display:block for the elements. Aside from that, when you have two elements placed one after the other, their margins will overlap. You might consider setting their paddings instead.
See this i think this is what you want http://jsfiddle.net/afshinprofe/zTb3g/1/
Related
MDN says:
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.
I don't understand the last sentence. Why does the collapsed margin end up outside the parent? If it ends up outside the parent, where will it go? I have searched the web and read several tutorials about margin collapsing, but I didn't find anything about this.
I threw together this little demo to help demonstrate the way this works:
http://jsfiddle.net/9pq8bm0o/
As you can see, I've made three elements, all nested within each other. The 2 inner containers both have a top margin value of 20px, and the outermost container has a top border (one of the things that is considered a margin separator).
So what does this mean?
Because there is no separation at the top of the two child elements, there is only 20px of space in between the outermost container and BOTH of the two child elements... the inner-most child has had it's margin collapse. Conversely, that margin that is there exists within the outermost container simply because of that border.. if you remove the border, all three elements will share the same 20px of margin which will be outside of all three containers.
So why is it like this?
The best way to think about margin collapsing is like this:
Asking for a margin on an element will ensure that it has that much margin at it's top, and nothing more (unless it's forced to have more).. So looking at my example, Does the middle .parent element have 20px of space above it? Yes, it does. Does the innermost child .child have 20px of space above it? Yes, it also does... so the margin rule is being applied correctly. It doesn't matter where that space lives, as long as it is there.
Imagine that there was a border around the .parent element, but the margin was still displayed the way it is without, and then ask those same questions.. Does the .parent element have the space? Yes, but does the .child element? No, it no longer would, because there would not be 20px of space in between it and the border that is now sitting above it... So, in reality, the space does not collapse, so that both of those questions can be answered as a "yes".
I hope that helps.. it's a little less of a direct answer to your question, and more of the theory behind how it works, so to put things a bit more plainly:
tl;dr
Margin, unlike padding, is meant to add space outside of elements. Because of this, margin will always collapse to the highest parent element whenever possible, to ensure that space is always "outside". Because it is outside of the element, it can count towards multiple different elements, as they all share that "outside" space.
Here is a very simply jsFiddle to demonstrate my problem: http://jsfiddle.net/ryandlf/mSmUv/4/
When an element has a top padding or margin and it sits on the first line within a div, the div does not respect that padding or margin and push the element down. In most cases this isn't an issue, but for example, if I have a button that has a top border and padding the top of the border will be cut off because the div is not taking into consideration the padding value.
Is there a workaround for this other than just blindly setting margins or padding on every container div element and hoping I have added enough to account for any internal element that might be affected?
your link with class button is not a block element, it is inline element. Change this default behaviour by adding dispaly: block to it and it will work as expected. Proof available on jsfiddle.
So to sum up, the problem is not with the div - it is the problem with css - inline elements ignore margin and padding because they cannot 'reserve space'.
UPDATE: To answer your comment, here is the solution you might be looking for
The button element is inline. To get the desired behavior you can set display:inline-block.
Check here
Try to add following to the parent div:
overflow: hidden
I hope it helps!
I created this quick jsfiddle project to help you help me.
Why does margin-top for #container push the entire body downwards from html when I expect it to push #container from #containerWrapper ?
The idea is to have all the content inside container which would be placed with a margin right under the menu.
This is caused by margin-collapse which happens to two adjacent margins. The inner margin will collapse into the outer one and behaves like the one on the outer container block.
If you want to only apply margin on #containerWrapper, you could either use padding-top or put a border between #containerWrapper and its outer block container.
For that Purpose ,You may use padding-top
I was trying for display:inline property and I found same question for which I was looking....and here I got this answer, it makes me very clear ....but I am not clear about these lines ...
Basically margin, padding and border
can be set on inline-level elements,
but they may not behave as you expect.
The behavior will probably be OK if
there's only one line, but other lines
in the same flow will likely exhibit
behavior different from your
expectations (i.e. padding will not be
respected).
so please anybody can make me clear about these lines...I have also tried for display :inline here
You cannot set height, margin-top, margin-bottom, padding-top and padding-bottom on an inline element. You can set margin left and right an padding left an right.
You can set with on an inline element but then it will behave like a block element: See here
Inline Elements will always be displayed next to each other as long a they fit next to each other.
yes inline element behave differently other then block element. the main point of inline element is that is doesn't take vertical margin & padding.
inline elements like a, span
you can give inline-block instead of inline
this is a best example related to your question
http://www.maxdesign.com.au/articles/inline/
EDIT
yes, padding-bottom pushing the inline element down but it's not add any width to your inline element means when the content move to new line it's going to overlap each other & in block element margin, padding & border are adding width,height & space the block element
check these link for more
http://reference.sitepoint.com/css/inlineformatting
with this property set (display:inline) you can't set width and height of your element. Margin, padding & border is ok. I'd use floating instead, but that's because it gives me more flexibility sometimes. =]
It is saying that if you have an inline element that goes all the way to the right of the page and then wraps around to the left (for example, a single line of text that takes up two lines of space) then you may have unexpected consequences. In particular the padding may not display as desired.
An inline element, when it doesn't break on to multiple lines, respects left/right padding - so you see the padding-left and padding-right inside the left and right edges of the element respectively.
When the inline element does break on to multiple lines, the padding is somewhat respected, in that again both left and right inside edges of the element have padding. The part where it isn't respected is exactly the part where the element breaks, the break-point doesn't have any padding because it simply spreads itself onto the next line.
A block element on the other hand, does respect padding properly because it adds the padding and the contents of the element break inside that padding.
Here's a quick image to help explain what I've explained:
When I remove the display:block from a p inside a div, it ignores the top-margin or it's own hight or something like that. It snuggles up right next to the element above it. Does anyone know why?
The div is floated, the element above is not.
Inline elements simply don't take vertical margins or height into account. Block elements do.
Edit:
In response to comments, it looks like there are two issues at play here.
You have two elements with id='generals'. Change this to class='generals'.
Add overflow: hidden to your generals style. All of the elements inside it are floated, and so don't apply to the height of the element. Adding overflow: hidden changes how the element is displayed, clearing all the floats inside it.