The margin is what separates one element from another. In the illustrated box model, the margin is the orange color on the outside edge. Margins are transparent to the parent element background, and so are often difficult to see.
Top and bottom margins collapse, which means that when two elements with defined margins touch top to bottom, only the largest margin is applied. They are not added together.
The CSS for the above example is
width: 260px; height: 260px; background-image: url(bgimage.jpg); margin: 20px; padding: 20px; border: solid #b52407 20px;