Box Model Tutorial

What is a box model? For a brief overview, a box model is a layout of four parts. It contains:

-margin

-padding

-border

-content

The margin, which goes on the outside, clears an area around the second box, which is the border. The margin is completely invisible. The padding which is the third box, clears around the content. The content is where you put text and images.

Now to the tutorial...

First we have to open up Dreamweaver. When it is open, you want to click on the split so we can see the code and design. You will see that there is a Doctype so we can leave that there.

You want to change the title from Untitled Document to Box Model Tutorial.

Now so we are going to create a css so after the head tag, we are going to type:

After that we are going to write in the body. First we have to create a line on top of the box. So we are going create an image.

After the line we created (img src), we are going to type in the box. So we have to make a div class and name it box. After that we will type:

We are going to save it and call it "box_model.html". Once you saved it, you will see a little box on the design section.

Voila! You have created a box model. If you have any questions, comments, or suggestions, comment below and i will get back to you. Thanks!