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

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

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

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 & padding assigned to them
  • Border margin & padding add to the size of a box within the browser window
  • If I have a box that is 400 px & I add 20 pixels of padding left & right, my box now takes up 440 px of space within the browser
  • Open box-model.html from within the course files
  • This page contains 2 div tags, one called left & the other called right contained with another box called outer
  • These IDS already set up on the page for each div with width background color properties assigned
  • Add padding to each box and note how the box layout changes
  • Show how the box width expands past the outer box due to the padding so the right box moves down on the page
  • The same goes for margin & border
  • You can use this page to get an idea of how the box model works

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
  • The Box Model Explanation 0:19
  • Add Padding 2:01
  • Add Border 3:43
  • Add Margin 4:01
  • Disabling Styles 6:15
  • Summary 8:17

Transcription: Understanding the Box Model

We are now going to take a look at the box model in CSS, so you can get an understanding of what that means.0000

I'll go ahead and add a title to this page, called "The Box Model."0009

Now, what I have open is box-model.html; so this will be the box model.0015

The idea behind the box model in CSS is basically: every tag in HTML is a box on the page, and that box has four sides to it--so you can keep in mind that you can control all four sides at a time, or you can control whatever sides you want of the box.0024

The key is the width of the box versus the width it takes up in the browser; and sometimes those are different, and that is what I want to demonstrate here.0047

We have a page, and it basically has three boxes on it: there is an outer yellow box, and I'll open up my CSS styles and close that up; you can see we have an outer yellow box, and inside that, we have a left box (which is red), and a right box (which is blue)--a pretty bright color scheme, actually.0059

If I move into the code, here is my outer ID (notice, it has a pound sign in front of it, so it's an ID); here is my left ID and my right ID.0084

And down in our code, we have three divs: a div with another div inside of it and another one alongside it.0099

So, these two divs--the left and right div--are both inside this outer div, as you can see in the code.0111

Let's play with this a little bit.0119

Right now, I have on my left box...well, let's look at the outer box first: the outer box is 600x600; my left and right boxes are 300 each.0121

What I want to do is take this text inside this left box and make it not so close to the upper left-hand corner.0136

I'm going to add some padding; now, there are three properties to a box that you can control from a box standpoint, that are involved in the box model, and those are border, margin, and padding.0145

So, padding always includes the inside color; so I'm going to add some padding to the left box up here.0160

I'm going to do it (I'll just go ahead and close the Files panel here) using this Properties area.0170

I'm going to click Add Property; I'll go down to where it says Padding; I could type it in; there is padding, and I am going to add 15 pixels of padding to my left box.0178

Now, as soon as I click off of this, watch what happens to my box.0192

You can see, everything got all messed up; and it looks like it's all messed up, but what has actually happened is: in order to figure out how wide this box is going to be, what I have to do is add the width and the padding.0200

Or, if there was border and margin, I would have to add that as well; so let's go ahead and add a border here.0218

I can move down to border, and what I will do is: I will add a 2-pixel solid border in black.0228

Now, I'm going to also add a margin; so I'm going to add padding, border, and margin to my left box.0241

And in the margin area, I'll say 15px, also.0251

If you take a look at how much space is now being taken up by my box, here is where 300 would be: you can see, this is extending well beyond my 300 pixels of width.0257

That is the basis of the box model: any time you add padding, border, or margin to a box, you have to add it to the actual width number.0272

So, what this padding actually did was: it added 15 pixels of padding inside the box, and (if I click on this, you can see) Dreamweaver is going to show that to me.0285

I clicked on the border of the box, and it's coming up; and I can put my cursor in and see, there are 15 pixels on the left of padding; there are 15 pixels on the right of padding.0299

Now, we also have it above and below; if you just use one value here, it ends up the same on all 4 sides of the box.0312

That is the padding piece; on top of that, I have a border of 2 pixels--that added 4 pixels of width, because 2 pixels of border on the left and 2 on the right...0322

And then we have our margin that added another 15 pixels on each side.0338

Margin added 30 pixels of width; border added 4 pixels of width, because we have to consider left and right; and padding added another 30.0344

Well, if I didn't allow for that, that would be 64 pixels of width that I am overlapping my content, all of a sudden, in my page layout; that could cause some major issues.0356

Now, when you are working in the box model or CSS positioning, what you can do is just put your cursor in front of that particular item, and it will show you how it reduces the size of that box; and it is literally reducing it 30 pixels in width.0370

I can also reduce it 4 pixels in width by removing the border.0390

And then, my margin--I can do the same thing: it's almost back to where it was; I have 15 pixels all the way around, which is making it press 30 pixels too large.0395

If I undo that, you can see my right box pops right up into place, because there is room for it.0409

When this left box is too large, you can see how it really messes up the page; basically, this blue box will only move up next to the red if there is space for it.0415

As soon as there isn't enough space, it goes underneath.0427

So, that is an example of the box model in CSS; its importance is that you have to factor in if you are adding border, margin, and padding to any of the sides of your boxes; make sure you are allowing for that space in the browser, and the amount of space it takes up within the browser.0432

Otherwise, your positioning and page layouts are really going to have a problem.0454

As long as you are aware of that up front and factor it in, you shouldn't have too much trouble, at least from the box model standpoint.0460

But every tag and ID, CSS selector, is all a box in our page; and every HTML tag is the base of all of that.0469

And every one of those tags can use this box model to its advantage.0483

But just be aware: the CSS box model incorporates margin, border, and padding for every box on your web page.0489

That is the box model in CSS and a few of the Dreamweaver tools to help you figure out what is going on on your pages and actually preview that box model within Dreamweaver.0498