The Solution

Hey there, how'd it go? 0:00 Were you able to write most or all of the box model properties and values for 0:01 this practice session? 0:04 If not, no worries, you can watch my solution, compare it to what you wrote, 0:06 and then try to recreate it yourself. 0:09 The goal was to get the box model of the box element 0:11 to match what's shown in box.png. 0:14 Now let's walk through the solution. 0:17 First up, to give an element a fluid width, 0:19 you set its width property to a percentage value. 0:23 In this case, I set width to 90%, then set the height value to 300 pixels. 0:25 Now to prevent the width from getting wider than 600 pixels, 0:33 I set a maximum width using the max width property and the value 600 pixels. 0:37 Next, I applied 20 pixels of padding on all four sides using the padding shorthand 0:47 property, which can apply all four values at once, and I use the value 20 pixels. 0:53 Then, to set the border styles, I used the border shorthand property and 1:04 set the value to 2 pixels solid, and set the color to the hex value, 8292b1. 1:10 Next, to center the box component horizontally on the page, 1:23 I used the margin shorthand property and set the value to auto, 1:26 which automatically calculates equal margins for each side of the box. 1:30 Now, applying a fixed height of 300 pixels to box caused its contents to overflow. 1:45 So I used the overflow property to handle the overflowing content. 1:52 And setting the value to auto prevents the contents of the box from overflowing 1:57 by clipping or cutting out any overflowing content. 2:02 So any time there's content that's not immediately visible, 2:05 the browser provides a scroll bar to let you scroll and view the content. 2:08 You could have also used the value scroll, which will always display a scroll 2:14 bar instead of letting the browser decide when to display it. 2:19 And to make sure that you're just displaying a vertical scroll bar, 2:25 you can use the property overflow-y. 2:30 Finally, the box has an extra 44 pixels applied to its total width and 2:33 height, because of the padding and border with values applied to it. 2:37 But we need box to be exactly 300 pixels tall and no wider than 600 pixels. 2:40 To adjust this, you could manually subtract 44 pixels from the max width and 2:45 height values of box. 2:51 But instead I challenged you to use a CSS box model feature that automatically 2:53 includes any border width and padding values into the total width and 2:56 height of an element. 3:00 And that feature is box sizing, which, as its name suggests, 3:01 alters the size of a box. 3:05 In the style sheet, I used the box-sizing property. 3:08 And setting the value to border-box forced the padding and 3:11 border width values into the specified width and height of box. 3:15 So now if you inspect the box element in your development tools, 3:22 you should see that the dimensions match the diagram shown in box.png. 3:26 And your page should look similar to mine. 3:31 I hope you were able to complete this practice session successfully. 3:36 If not, why not start over and try to write the properties and 3:39 values without looking at my version? 3:42 I'm also going to teach you more about the box sizing property and 3:44 layout in my CSS course. 3:46 So I'll see you soon and happy coding. 3:48