Apply margin to running CSS position

I'm using the following CSS code to position my footer at the bottom of the page:

<style type="text/css">
    @page {
        @bottom-center { content: element(footer); }
    }
    #footer {position: running(footer);}
</style>

Is there a way to display it slightly higher? Adding margin-bottom: 50px doesn't 开发者_开发百科seem to have an effect.

update: the page will be converted to PDF using iText

---

I finally managed to get it working with the following CSS:

    <style type="text/css">
      @page { 
          margin-bottom: 100px;
          @bottom-center { 
            content:element(footer);
          }
      }

    #footer {
      position: running(footer);
    }
</style>

Previously, I only tried to add margin-bottom to the @bottom-center and #footer.

---

To achieve that, you usually use:

#footer {
  position: absolute;
  bottom: 50px;
}

jsFiddle example