Set position absolute and margin
I know this isn't a very timely answer but there is a way to solve this. You could add a "spacer" element inside the element positioned absolute
ly with a negative bottom margin and a height that is the same size as the negative bottom margin.
HTML:
<div id="container">
<div class="spacer"></div>
</div>
CSS:
// same container code, but you should remove the margin-bottom as it has no effect
// spacer code, made it a class as you may need to use it often
.spacer {
height: 50px;
margin: 0 0 -50px 0;
/* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}
Building upon Joey's answer, for a cleaner markup, use the CSS :after
-selector to add a spacer for the desired bottom margin.
CSS
#container:after {
position: absolute;
content: "";
bottom: -40px;
height: 40px;
width: 1px;
}
You need to set the position
to relative
in order to set its margin
.
The margin-bottom
, margin-left
and margin-right
will NOT work when the element is in position: absolute
.
Example: HTML:
<img src="whatever.png"/>
CSS:
img {
position: relative;
margin: 0 auto;
}
What are you expecting margin-bottom
to do when your element is positioned by its top side?
margin-bottom
will only do anything to an absolute
ly-positioned element if the element has no top
property.