Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Understand CSS Layout with the Box Model

    Tyler ClarkTyler Clark
    cssCSS

    The box model is one of the most important aspects of understanding layouts and design. It defines how elements will be affected by margins, borders, padding, and actual content. Let’s use the google devtools to mess with different layouts.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 The CSS box model is the foundation of layout on the web. Each element is represented as a rectangular box with the box's content, padding, border, and margin built up around one another. As HTML is structured on the page, the browser will take this layering into effect when trying to piece together an overall layout.

    00:23 When we hover over our div here with a class of box, we see that it's 100x100. If we were to give it padding of 10 pixels and refresh, our box model accounts for this padding and now our width and height is 120x120. If we give this box a border of 10 pixels, solid and green, go ahead and refresh, our box gets even bigger now as it accounts for border and it's 140x140.

    00:50 If we add margin to this box at 10 pixels and refresh, we see that now we have margin on our box but it's not actually affecting the size of our box. It's still 140x140.

    01:02 This is because margin acts a little bit differently. It surrounds a CSS box and pushes up against other CSS boxes around it in the layout, but it doesn't add to the height and width.

    01:12 If we wanted our browser to take into effect the height and width that we've given it and not add on padding and border to the height and width, we can do box sizing, border box. This will tell it to not add in border and padding to the overall height and width, so we're back to 100x100. The default styling is not border box, but content box.

    01:37 There is one caveat however. Everything that we've seen so far with the box model only applies to block-level elements. If we were to add display inline here to our box we could see that height and width are going to be ignored.

    Discuss

    Discuss