CSS box model: margins

Examine the CSS source code for details on using padding and border properties.

Margin Basic Demos

Block tag margins assigned separately to each side

Block tag margins assigned to all sides the same

Vivamus faucibus neque nec ipsum consequat congue. Test inline Tag Margins Proin ipsum lacus, placerat in condimentum at, molestie at urna. In lacinia aliquam ornare.

<body> Margin

The <body> tag actually has margins of its own. If left to the default, this will cause a space between your page content and the edges of the viewport. Note how this page content is contained by #wrapper, which is colored light grey. Also note how the white color of the viewport is visible above and at the sides of #wrapper.

Apply margin:0px; to the <body> to remove this space.

Meeting Margins

In CSS meeting horizontal margins are added, while meeting vertical margins collapse to the largest value of the two.

A: horizontal meeting margins 40px + 60px = 100px horizontal distance between elements

horiztonal
margins

B: vertical meeting margins 10px + 20px = 20px vertical distance between elements

vertical
margins