Intro Guide to CSS: Explore Your Box

When I first started web development, it was the above concept that really helped me to understand what was going on.

Every div, image, and paragraph, etc.. are all boxes. Each of these boxes has the same attributes that can be altered to change how they are displayed.

From outermost to innermost, these attributes are margin, border, padding, and lastly your content. Below is a graphic that demonstrates this.

Margin is very helpful to create space on the outside of a box. It is transparent and therefore meant to structure and space out your boxes without changing the inner content.

The border is typically used to outline the padding and content. It doesn't have to be visible, but it can be if given a color. Defining the radius will also round edges of the visible content.

Padding is also transparent and is used for spacing like margin. However, the important distinction between the two is that padding creates space directly around the content.

If for instance, the content was a picture, more padding would actually shrink the image. It does not expand the total size of the box, whereas margin does.

If you are having a difficult time visualizing what is going on, don't worry because it's perfectly normal!

The most helpful resource to help you learn are the development tools that are built into every major browser.

How to use Google Chrome development tools:

1. Open chrome and find a website you want to inspect.

2. Now, either right-click and choose the inspect option, or hit F12.

3. You should notice a side panel pop up to the right. Inspect the webpage content and you will see the box model layers surrounding the content.

4. Now the fun of breaking things begins.

On the right panel you can change one of the box model attributes you just learned about!

Ex. Change padding from 20px to 40px. Reload the page when needed.