New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

CSS Fundamentals
Illustration by

What is the box model?


From:

CSS Fundamentals

with James Williamson

Video: What is the box model?

No matter what the topic, you can always find a handful of core concepts that are critical to understanding the subject properly. For CSS, the box model is certainly one of those concepts. Without understanding the box model, almost every task related to the physical relationships of elements would be more difficult. If, on the other hand, you have a thorough grasp of the box model, tasks like page layout become much easier. So, what is the box model? Well, the box model is the term used to describe the rules surrounding the physical properties of all HTML elements.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS Fundamentals
3h 14m Beginner Sep 26, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.

Topics include:
  • Understanding basic selector types
  • Integrating CSS with HTML
  • Examining browser rendering differences
  • Exploring CSS specifications
  • Checking browser support
  • Understanding the box model
  • Adjusting margins and padding
  • Positioning elements
  • Exploring basic layout concepts
  • Understanding media queries
  • Introducing CSS3
  • Using CSS Reset
Subjects:
Web Web Foundations
Software:
CSS
Author:
James Williamson

What is the box model?

No matter what the topic, you can always find a handful of core concepts that are critical to understanding the subject properly. For CSS, the box model is certainly one of those concepts. Without understanding the box model, almost every task related to the physical relationships of elements would be more difficult. If, on the other hand, you have a thorough grasp of the box model, tasks like page layout become much easier. So, what is the box model? Well, the box model is the term used to describe the rules surrounding the physical properties of all HTML elements.

If that makes you go, huh? well, think about it this way. Every single element on your web page is considered to be in a rectangular box. The properties of this box, its width, height, padding, and margin defined not only the sides of the element, but also how it relates to the elements around it, so yeah, it's pretty important. First, let's cover the basics, the properties that make up the box model. Now, here we have a nice visual representation of an element's box.

This could be a paragraph, a heading, a list item, really any element on your page. If we start on the outside of an element, the first item we encounter is the element's margin. Margins represent the space around an element and are used to define the space between page elements. Margins are not used to calculate the final width of an element, but as you can see, they are very important in terms of how elements relate to each other and how much space an element requires within a layout.

The next property we come to is the element's border. All elements are allowed to have a border assigned to it, even though by default, most elements don't have one. Borders have three properties that define the border itself: the border-width, border-style, and border-color. You can also assign borders individually to the top, right, bottom, and left sides of an element. Borders are considered to be part of the box model because they defined the outside edge of an element and because their physical size is used when calculating the overall size of an element.

This often gets overlooked in many layouts, and more often than not, it can cause serious problems. Forgetting to add the size of the border to the size of an element can cause tight layouts to break, as elements will be anywhere between two to four pixels larger than anticipated. After borders we have padding. Padding is space added to an element inside the border. Now the easiest way to think of this is to imagine a box with something fragile inside of it that you need to ship. More than likely, you're going to add some packing material to the box to keep the fragile object from touching the edge of the box; that's padding.

Padding is totally transparent, and its value is used to calculate the overall width and height of an element. Finally, we have the width and height properties. You can set these properties for any element using either percentages or a fixed unit of measurement. It's important to remember, however, that there's a big difference between the width and height properties and the total width and height of an element. This tends to be very confusing to those that are new to CSS or simply unfamiliar with the box model. To calculate the total width of an element, use the left and right border values, the left and right padding values and the element's width property.

If you were thinking that this has probably tripped up a lot of designers, you would be right. Often layouts will break because the total width of an element is greater than anticipated. However, understanding this concept gives you the ability to confidently set values to all of the box model properties to fit specific layouts or regions. The box model, for the most part, is pretty simple. There are, however, a few things that can trip you up, if you're not careful. First, just because a property isn't declared, don't assume that its value is zero.

Remember that all browsers have default styles that apply to HTML elements. If you don't overwrite them, the default value will be applied. It's also a quite common to see authors set the width of the element to 100% in order to make it fit fully within a parent element. For the most part, that's fine, but any values for margins, borders, and padding will force the total width to be over 100%, making the element no longer fit. There are other things, like margin collapse, floated elements and considerations for undefined widths and heights, that you'll need to investigate as your understanding of the box model deepens.

For now, concentrate on the fact that the properties that make up the box model allow you to control the physical dimensions of the elements on your page, and that to fully and truly master visually formatting your elements, you'll need to understand the ins and outs of how those properties work.

Find answers to the most frequently asked questions about CSS Fundamentals.


Expand all | Collapse all
please wait ...
Q: This course was updated on 12/13/2011. Can you tell me what has changed?
A: One movie called "Who is this course for?" was added to provide information on what you can expect to get from the course, depending on your level of familiarity with CSS.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.