Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

What is the box model?

From: CSS Fundamentals

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.

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.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 68395 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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.

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

Your file was successfully uploaded.

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.