The margins collapse is part of the specifications for the box model and the use of vertical margins . Often this 'phenomenon' is ignored, because of the use of other properties which prevent the collapse, but every so often, it can create a puzzling result that could be considered as an error of interpretation. The margins collapse happens when adjacent vertical margins (margin-top and margin-bottom), with ...

3 types of 'box model' based on 3 columns: 3 columns fixed width left align 3 columns fixed width centered 3 columns fixed width right align ...

4 examples of 'box model' based on 2 columns layout with 1 fixed column and 1 fluid column. Using the position:absolute; : left column at fixed width / right column at fluid width left column at fluid width / right column at fluid width Using the float:left; : left column at fixed width / right column at fluid width left column at fluid width / right column at fluid width ...

6 examples of 'box model' based on 2 columns: 2 columns fixed width aligned to the left 2 columns fluid width aligned to the left 2 columns fixed width centered aligned 2 columns fluid width centered aligned 2 columns fixed width aligned to the right 2 columns fluid width aligned to the right ...

6 types of basic 'box model' based on a single column: 1 column fixed width aligned to the left 1 column fluid width aligned to the left 1 column fixed width centered align 1 column fluid width centered align 1 column fixed width aligned to the right 1 column fluid width aligned to the right ...

As from the name, the content of a page is positioned inside boxes which can, at their turn, contain other boxes of content such as inline and block element. Those blocks, other then the content itself, can be made of margins, paddings and borders using the following css properties: margin: the transparent and empty space in between different boxes in units of measure or percent padding: the space in betwee ...