Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Understanding the Box Model

  • 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.

  • Intro 0:00
  • Outer Wrapper 0:43
    • Adding Margin
    • Width
  • Adding a Guide 4:43
    • View
    • Rulers
    • Dragging Ruler
  • Scrubbing 5:36
  • Total Width 6:51