Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Box Model

3:52 with Anwar Montasir

Gaining more control over your CSS layouts starts with one very important concept: understanding the CSS Box Model. The Box Model is what describes the amount of space each element takes up on the page. Although it may not seem obvious when viewing a web page, every element in HTML can be considered a rectangular box.

Treehouse Courses

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Hi, my name is Anwar. 0:09
    I'm a designer, a developer, and a teacher at Treehouse. 0:11
    My pronouns are he/him. 0:14
    In this course, we're going to learn techniques for 0:17
    better control over our CSS layouts. We'll cover how the 0:21
    CSS box model impacts the presentation of each HTML element, 0:25
    learn to control the position of each element onscreen, and 0:31
    even begin to adjust our layouts for different screen sizes and 0:36
    environments. To get the most out of this course, you should 0:40
    have at least a decent grasp of the basics of working with CSS. 0:44
    If you don't, I recommend checking out our CSS Basics course, 0:50
    linked in the Teacher's Notes, before you rejoin me right here. 0:54
    Gaining more control over your CSS layouts starts with one very 1:00
    important concept: under- standing the CSS box model. 1:05
    The box model is what describes the amount of space each 1:10
    element takes up on the page. 1:14
    Although it may not seem obvious when viewing a web page, 1:17
    every element in HTML can be considered a rectangular box. 1:21
    Say your page contains a heading using the h1 element. 1:26
    That's a rectangular box. 1:31
    The paragraph of text beneath it, that's a rectangular box. 1:33
    And if those two elements are wrapped inside a div, well, 1:37
    that means your two smaller boxes are inside one larger box. 1:42
    Calculating the size of each of these boxes requires more than 1:47
    just measuring the width and height of the content. 1:52
    The box in the box model is actually made up of 1:55
    four distinct parts that calculate its size. 1:59
    Let's examine our paragraph. The innermost area and core 2:03
    core component of the box is the content area. In the case of 2:08
    our paragraph, this is determined by the amount of text we have. 2:13
    Surrounding that content area is the padding area. Padding is 2:18
    often used to give the content area some breathing room, 2:24
    by separating the content from the surrounding border area. 2:27
    The border area of the box is the outermost part of the box. 2:31
    You can think of it as giving the rectangular box an outline. 2:38
    Borders tend to be hidden on most CSS elements by default. 2:43
    But once visible, different styles like color and 2:48
    thickness can be applied to them. Finally, the margin 2:52
    area exists outside of the box. It's the space around an 2:57
    element that separates it from other elements. 3:01
    It's pretty easy for beginners to mix up padding and margin. 3:05
    So if you're a note-taker, you might want to write this down. 3:10
    Padding creates space inside the box. It's the 3:14
    space between the content and the border. Margin creates 3:18
    space outside the box. It's the space around the border. 3:23
    As you'll see throughout this stage, padding, borders, and 3:28
    margins are important com- ponents of the CSS box model. 3:33
    They're the properties that wrap the content area of a box. 3:38
    Now that we've covered the main properties of the CSS box model, 3:43
    we're ready to put these concepts to work. 3:47
    That's coming up next. 3:50

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up