HTML    CSS    PHP    Bootstrap    JavaScript    Flash    Dev Tools      

The Box Model - Part 1

Current Time:   00:00 / Total Time:   00:00

Seek Bar Volume

Do you have a question or comment on this, or any tutorial Contact Support

We are always looking for input on our tutorial content. If you have a suggestion, comment, additional information on this topic that you feel should be added, drop us a line. We appreciate your input.

Title: The Box Model - Part 1

Category: CSS
Topic: Essential Training Series
Publish Date: 2015-01-02
Views: 33
Author: Mike King

Description

This is a 3 part series. We start the tutorial with a presentation on the overview of the Box Model. We discuss the interaction of the Content Area, the Padding and Border and the Margins that make up the space that our Box Model assumes in our HTML page. We discuss and demonstrate how the normal document flow interacts with the browser based on the position if the elements in the HTML document. Using the image folder on the root of the website we format our images to demonstrate the difference between the block level elements and in line level elements. We then prepare our CSS file by creating the CSS file and inputting the CSS reset code for the remaining tutorials.