Margin, Border, and Padding

Let us take a look at each of these...

To establish an aesthetically pleasing webpage, one must know the difference between margin, border, and padding. If you were to think of a webpage wireframes, it is clear that the page is broken down into different sections or boxes. Although these boxes may not be not overlapping, the content could be too close to understand, so we use the box model with margin, border, and padding to separate content/sections on a page for ease of the user/viewer.

Starting from the outside, lets look at margin.

Think of the margin as the outer buffer shell, that allots your specified gaps between other sections, content, or normally, other div tags. This margin does not include anything from the inside of your div; it just gives it some breathing room from other sections.

Now you have some breathing room on the outside, lets add a border.

You are able to have a border displayed, but it is always there even if it is not visible. Yes, we think of borders as the outline or frame of a picture, however, it is a little more than that. The border will inherit the content of the section, meaning it will start the background color specified that will be displayed in the section. Borders can be manipulated with color but also the edges can be curved using something like border-bottom-right-radius in .css. Borders may start the content if padding is not adjusted accordingly.

So lets get some breathing room inside.

Now that we have established our space, we decide that we want to have out text or content not touching the edge of the border. Using padding in .css will allow us to have the text not on hanging on the edge of our boarder, giving us more breathing room, inside.

Using all three in your webpages allows the creator/user to easily separate content/sections, making it easier to read and view.