1. Technology
Send to a Friend via Email

CSS Margin Examples

Examples of How to Use the CSS Margin Property

On this page you will see several examples of how margins interact with one another and the rest of the box model.

Return to the CSS Margin information page.

Floated Image with Default (0) Margins

Text above the image.

Mali with Car I've placed a thin black border around the image so that you can see where the margin starts and leaves off. The margin is the default for the browser or "auto". As you can see, the text is right up next to it. The text above is slightly away because the P tag has a margin on it. The same is true of the text below. It's in a BLOCKQUOTE tag which has a margin set on it.

margin: auto;

Return to the CSS Margin information page.

15px Margin Around a Floated Image

Text above the image.

Mali with Car I've placed a thin black border around the image so that you can see where the margin starts and leaves off. It should be 15px from the paragraph above the image, a 15px gutter on the right and left and 15px from any text below the image.

margin: 15px;

Return to the CSS Margin information page.

15px Left Margin Around Floated Image

Text above the image.

Mali with Car I've placed a thin black border around the image so that you can see where the margin starts and leaves off. As you can see, the image still has the left gutter, but it is much closer to the text above and on the right side and bottom.

margin-left: 15px;

Return to the CSS Margin information page.

Text above the image.

Mali with Car I've placed a thin black border around the image so that you can see where the margin starts and leaves off. As you can see, the image no longer has the left gutter, but the text to the right is 15px away from it.

margin-right: 15px;

Return to the CSS Margin information page.

15px Margin and 15px Padding Around Floated Image

Text above the image.

Mali with Car I've placed a thin black border around the image so that you can see where the margin starts and leaves off. The border shows you exactly where the padding is (inside the border) and where the margin is (outside the border).

margin: 15px; padding: 15px;

Return to the CSS Margin information page.

Overlapping Content with Negative Margins

Text above the image.

Mali with CarNow the text overlaps on the image by 15px because I've created a negative margin. You should also note that the image has moved over 15px on the left because that margin is negative as well. Negative margins can be very useful, but they can be tricky to use. So be sure to test carefully.

margin: -15px;

Return to the CSS Margin information page.

©2014 About.com. All rights reserved.