Box Model - Week 5

Box Model

This is an example of the CSS Box Model. You can see that the heirarchy of each CSS attribute.

Starting from the inside, CONTENT is the innermost attribute which makes sense since that is what is inside the element tags.

Moving outward, the next attribute is PADDING which is blank space between the content and the next attribute.

Next, is the BORDER attribute which can have characteristics other than just size. You can specify color and line style (solid, dashed, dotted, etc.)

Finally, between the border and other elements on your screen is the MARGIN attribute. Like the padding attribute, a margin is just blank space.

Note that you can specify box model attributes in different ways, here are just a few:

padding: 10px;

Adds a 10 pixel space on all sides of an element.

padding: 15px 40px;

Adds 15 pixel padding to top & bottom, 40 pixel padding to left & right.

border-top: 10px solid red;

Adds a solid red 10 pixel border only on the top of the element.

margin-right: 20px;

Adds a 20 pixel margin only on the right of the element, between itself and any other elements on the page.

padding-bottom: 10px;

Adds a 10 pixel space only on the bottom of the element.

padding-left: 10px;

Adds a 10 pixel space only on the left of the element.

There are many other ways to specify Box Model attributes. You can specify attributes individually, such as border-style, border-width, border-color, etc.

Right-click and choose View Source to see how this box is built with CSS.

The best way to learn web development is by trial-and-error so have fun playing around with all of these elements and attributes & see what happens!

You can learn more about the Box Model HERE.