The CSS box model simply means that each content area on the page and each HTML tag is a box
These boxes can have border, margin and padding assigned to them
Border, margin and padding add to the size of a box within the browser window
If I have a box that is 400 px and I add 20 pixels of padding left and right, my box now takes up 440 px of space within the browser
Open boxModel.html which contains 3 boxes of content, one called left and the other called right
Each div has an ID that is 300 pixels wide and contains a background color
This page can be used to view how the box model works
Margin, border and padding add to the width of the box in the browser, these properties are added in addition to the width set using the width property
This lesson offers a visual method for explaining this concept that you can modify in order to fully understand the CSS box model
Be sure to keep this in mind when planning web page layouts
Understanding the Box Model
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
Educator.com recommends Adobe Dreamweaver CC to use with our Dreamweaver CC course. Adobe Dreamweaver CC is the leading all-in-one visual development tool used by web designers and developers worldwide to create, publish, and manage their websites and mobile content. Membership includes the full version of Dreamweaver CC to download, install, and run on your computer. You will get immediate access to all the latest updates and new features as soon as they're released.