Flying Saucer: CSS Margin, Padding and Background Support

Previous Page

Next Page

Flying Saucer XML/CSS2 Renderer

CSS Margin, Paddings and Backgrounds

XMargin, padding and background support includes: CSS margin and padding, on any or all four sides of a box. You can apply both shorthand ("padding: 1px") or to individual sides ("margin-left: 10em"). Backgrounds can be colored and/or include images (as background attachments). Background images can be repeated horizontally, vertically, or both, and fixed in place.

### Margins

margins: 0px
margins: 20px
margins: 10px 20px 30px 40px

### Padding

padding: 0px
padding: 20px
padding: 10px 20px 30px 40px

### Backgrounds

    {
              background-color:#ccffcc;
              border-width: 20px;
              border-style: solid;
              border-color: #000000;
              padding: 20px;
              margin: 20px;
    }

div with image back and no repeat
div with image back and repeat both
div with fixed image background and repeat both