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 CSS
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Bookmark and Share
Lecture Comments (3)

0 answers

Post by Sean Rogers on February 24, 2014

At 8:58, that happens all the time to me

0 answers

Post by Alex Millman on March 15, 2013

this lecture shouldn't be number 9. more like 3

0 answers

Post by Jesus Fernandez on August 18, 2012

how can I place two boxes side by side?

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
  • Properties 1:08
    • Width & Height
    • Margin, Padding & Border
  • Example 1: Box Properties 2:05
    • Step 1: Create a Box with Margins, Padding, and Border
    • Step 2: Add Width and Height to the Box
    • Step 3: Consolidate Margins and Padding with Shorthand Notation
  • General Concepts 12:45
    • Inner Content, Padding, Border, and Margins
    • Internet Explorer's Broken Box Model and Understanding the Correct Box Model
  • Less intuitive Behavior 15:51
    • Width Affects the Content Area Only, Not the Padding, Border, or Margins
    • Margins Collapse Into Each Other
    • Margins Can Have Negative Values
    • Padding Can't Have Negative Values
    • Background Lies Behind the Content, Padding, and Border Areas
    • Overflow Property