HTML    CSS    PHP    Bootstrap    JavaScript    Dev Tools      

The Box Model - Part 1

Current Time  00:00 Total Time  00:00

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: 254

Author: Mike King


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.