Set position absolute and margin

I would like to set an element's position to absolute and have a margin-bottom, but it seems that the margin-bottom doesn't have an effect.

HTML:

<div id='container'></div>

CSS:

#container {
  border: 1px solid red;
  position: absolute; 
  top: 0px;
  right: 0px;
  width: 300px;
  margin-bottom: 50px; // this line isn't working
}

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

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 absolutely-positioned element if the element has no top property.

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