Consider that all elements have a margin, a border, and padding within the CSS visual model. The reason for this is that every element creates a box. Two types of boxes exist: block boxes (related to block-level elements) and line boxes (related to inline boxes). The figure shows the difference.
Examining boxes in the CSS visual model.
I've added a light gray background color to help with the visualization of block and line boxes. The H2 header is a block box. It runs the width of the available browser space (width can control this) and is followed by a line break after the block terminates at the right edge. The line box is demonstrated by a link and sits inline with the surrounding text. You can see how its edges run as close to the content as possible.
By tapping into the CSS visual model, which is referred to as the Box Model, you can add styles to various portions of the box. I'll show you the Box Model in the following section of this tutorial so you can see exactly how the Box Model works, but the point now is that you can style not just all sides of a given box, but also specific sides of that box.
Margins give you the capability to control the box's margins in both positive and negative values. Borders enable you to style the box's border using a range of predefined border styles, and padding enables us to add padding to the box (much like adding cell padding to a table). Being able to style these aspects of any element is one of the reasons CSS is far more powerful than any formerly available technology in terms of being able to style your pages with great control.