Thursday - The Box Model

Today we're going to explore the Box Model a bit. The Box Model is a name for the way HTML and CSS imagine elements in Web design. At the center of the box is the content - whether it is a paragraph or an image or whatever. You can add padding - blank space - on four flat sides just like a picture frame. Around that padding you can add a border on those four flat sides. And then you can add margin - blank space again - around the outside of the border. Imaging the content as a picture you want to hang on your wall. The border represents the frame around the picture. The padding represents the matting you add inside the frame. And the margin represents the space on the wall you leave between the various pictures being displayed there.

In addition, it is important to know that the box model follows the TRouBLe sequence, which stands for Top, Right, Bottom, Left. That's moving around the box model clockwise. We use this sequence to condense our CSS. Using this notation we can accomplish the same effects with far fewer lines of code - less effort, more results. I will demonstrate in class.