title
HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained

description
A deep dive into the CSS Box Model. In this video I look at what the CSS box model is, breaking down margin, padding and borders. It's a bit of a longer video than most in this series as it covers a lot! This video is part of a large series introducing HTML & CSS to people who have never used it before. The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own! ---- Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/?keywords=%22half+bit%22 Artist: http://incompetech.com/

detail
{'title': 'HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained', 'heatmap': [{'end': 69.464, 'start': 42.186, 'weight': 0.856}, {'end': 114.378, 'start': 80.7, 'weight': 0.702}, {'end': 641.368, 'start': 609.693, 'weight': 0.97}], 'summary': 'Series covers css box model basics, explaining margin, padding, border properties, and their effects, delves into the differences between padding and margin, and highlights the importance of understanding these concepts for web layout design.', 'chapters': [{'end': 582.706, 'segs': [{'end': 33.081, 'src': 'embed', 'start': 0.472, 'weight': 1, 'content': [{'end': 2.828, 'text': "Hey guys, CSS Box Model, let's go.", 'start': 0.472, 'duration': 2.356}, {'end': 9.169, 'text': "So I've got a really simple page here.", 'start': 7.648, 'duration': 1.521}, {'end': 10.049, 'text': 'We have our title.', 'start': 9.249, 'duration': 0.8}, {'end': 17.013, 'text': "I've got a div with a class of box on it with a paragraph in there and everything we're going to be doing today is with our CSS.", 'start': 10.269, 'duration': 6.744}, {'end': 22.315, 'text': "So I'm going to come down here and we're going to start doing a little bit of CSS.", 'start': 18.413, 'duration': 3.902}, {'end': 27.798, 'text': "Another thing that I'm going to throw in that I haven't looked at yet is some comments because I think they're going to be useful.", 'start': 22.656, 'duration': 5.142}, {'end': 33.081, 'text': "If you remember back in HTML, sorry, I said we weren't going to be in here, but we'll look.", 'start': 27.998, 'duration': 5.083}], 'summary': 'Introduction to css box model with simple page and usage of comments.', 'duration': 32.609, 'max_score': 0.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI472.jpg'}, {'end': 69.464, 'src': 'embed', 'start': 42.186, 'weight': 2, 'content': [{'end': 49.87, 'text': 'We can also put comments in CSS, but if you use an HTML comment in CSS, it will break your CSS and cause things not to work.', 'start': 42.186, 'duration': 7.684}, {'end': 54.052, 'text': "And that causes a whole bunch of heartache and you're wondering what you did wrong.", 'start': 50.11, 'duration': 3.942}, {'end': 55.092, 'text': "And it's really annoying.", 'start': 54.232, 'duration': 0.86}, {'end': 57.854, 'text': 'So do not use HTML comments in there.', 'start': 55.733, 'duration': 2.121}, {'end': 63.117, 'text': 'You have to use CSS comments and CSS comments forward slash star.', 'start': 58.274, 'duration': 4.843}, {'end': 69.464, 'text': 'This is my comment, star forward slash closes the comment.', 'start': 64.137, 'duration': 5.327}], 'summary': 'Avoid using html comments in css to prevent css from breaking and causing errors.', 'duration': 27.278, 'max_score': 42.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI42186.jpg'}, {'end': 69.464, 'src': 'heatmap', 'start': 42.186, 'weight': 0.856, 'content': [{'end': 49.87, 'text': 'We can also put comments in CSS, but if you use an HTML comment in CSS, it will break your CSS and cause things not to work.', 'start': 42.186, 'duration': 7.684}, {'end': 54.052, 'text': "And that causes a whole bunch of heartache and you're wondering what you did wrong.", 'start': 50.11, 'duration': 3.942}, {'end': 55.092, 'text': "And it's really annoying.", 'start': 54.232, 'duration': 0.86}, {'end': 57.854, 'text': 'So do not use HTML comments in there.', 'start': 55.733, 'duration': 2.121}, {'end': 63.117, 'text': 'You have to use CSS comments and CSS comments forward slash star.', 'start': 58.274, 'duration': 4.843}, {'end': 69.464, 'text': 'This is my comment, star forward slash closes the comment.', 'start': 64.137, 'duration': 5.327}], 'summary': 'Avoid using html comments in css to prevent css from breaking.', 'duration': 27.278, 'max_score': 42.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI42186.jpg'}, {'end': 114.378, 'src': 'heatmap', 'start': 80.7, 'weight': 0.702, 'content': [{'end': 82.841, 'text': 'the CSS box model to be exact.', 'start': 80.7, 'duration': 2.141}, {'end': 91.185, 'text': "Okay, so I have my CSS box model that we want to explore and it's a weird name, kind of weird in general, but it's not too complicated.", 'start': 83.021, 'duration': 8.164}, {'end': 99.389, 'text': "So what I'm going to start with is I'm just going to give my box a background and let's make it pink.", 'start': 91.305, 'duration': 8.084}, {'end': 104.171, 'text': "I've been using pink a lot, but it stands out nicely on this background without being too abusive on the eyes.", 'start': 99.649, 'duration': 4.522}, {'end': 107.233, 'text': 'So I have a box.', 'start': 106.593, 'duration': 0.64}, {'end': 108.153, 'text': "There's my box.", 'start': 107.493, 'duration': 0.66}, {'end': 109.074, 'text': "It's nice and pink.", 'start': 108.374, 'duration': 0.7}, {'end': 114.378, 'text': "And the next thing I'm going to do is I'm going to give this box a width of 300 pixels.", 'start': 109.694, 'duration': 4.684}], 'summary': 'The speaker is exploring the css box model, giving it a pink background and a width of 300 pixels.', 'duration': 33.678, 'max_score': 80.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI80700.jpg'}, {'end': 390.783, 'src': 'embed', 'start': 355.866, 'weight': 0, 'content': [{'end': 359.769, 'text': 'And you know, I could actually use this and then come in with our border right.', 'start': 355.866, 'duration': 3.903}, {'end': 381.539, 'text': 'width of 10 pixels border right style of solid and a border right color of green and refresh, and then I get a green border over on that side.', 'start': 362.763, 'duration': 18.776}, {'end': 390.783, 'text': "You'll also see it doesn't really matter the order that I put them in width color style and width style color and any order you put them in it will work fine.", 'start': 382.059, 'duration': 8.724}], 'summary': 'Demonstrating css border properties with a 10-pixel solid green border on the right side.', 'duration': 34.917, 'max_score': 355.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI355866.jpg'}], 'start': 0.472, 'title': 'Css box model basics', 'summary': 'Introduces the css box model, covering margin, padding, and border properties, demonstrating their effects with quantifiable data and explaining the impact of css comments.', 'chapters': [{'end': 582.706, 'start': 0.472, 'title': 'Css box model basics', 'summary': 'Introduces the css box model, covering margin, padding, and border properties, demonstrating their effects with quantifiable data and explaining the impact of css comments.', 'duration': 582.234, 'highlights': ['The chapter introduces the CSS Box Model, covering margin, padding, and border properties. The speaker explains the three different parts of the box model: margin, padding, and border, and proceeds to demonstrate their effects with quantifiable data, such as setting margin to 500 pixels and observing the resulting shift.', 'The speaker explains the impact of CSS comments and the importance of using CSS comments instead of HTML comments. The speaker emphasizes the importance of using CSS comments over HTML comments, highlighting that using HTML comments in CSS will break the CSS and cause issues, while demonstrating the correct syntax for CSS comments.', "Demonstrating the effects of border properties and the impact of their order and values on the visual output. The speaker demonstrates the impact of border properties by changing their values and order, showcasing how the visual output changes based on properties such as width, color, and style, and explains the cascading effect of the properties' order."]}], 'duration': 582.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI472.jpg', 'highlights': ['The speaker demonstrates the impact of border properties by changing their values and order, showcasing how the visual output changes based on properties such as width, color, and style.', 'The chapter introduces the CSS Box Model, covering margin, padding, and border properties. The speaker explains the three different parts of the box model: margin, padding, and border, and proceeds to demonstrate their effects with quantifiable data, such as setting margin to 500 pixels and observing the resulting shift.', 'The speaker explains the impact of CSS comments and the importance of using CSS comments instead of HTML comments. The speaker emphasizes the importance of using CSS comments over HTML comments, highlighting that using HTML comments in CSS will break the CSS and cause issues, while demonstrating the correct syntax for CSS comments.']}, {'end': 761.862, 'segs': [{'end': 641.368, 'src': 'heatmap', 'start': 582.706, 'weight': 0, 'content': [{'end': 590.711, 'text': "in general, solid is what i'm going with, and in general i'm not overwriting the same style a whole bunch of times.", 'start': 582.706, 'duration': 8.005}, {'end': 598.815, 'text': "i'm making one style and i'm sticking to it, and let's make that 10..", 'start': 590.711, 'duration': 8.104}, {'end': 599.436, 'text': 'And there we go.', 'start': 598.815, 'duration': 0.621}, {'end': 600.839, 'text': 'I got my red border.', 'start': 599.637, 'duration': 1.202}, {'end': 609.673, 'text': 'Now the last one is padding and people mix up padding and margin all the time because they work really similar to each other.', 'start': 601.72, 'duration': 7.953}, {'end': 611.837, 'text': "So I'm going to make the value of them both the same.", 'start': 609.693, 'duration': 2.144}, {'end': 615.421, 'text': "And right away, you're going to see the difference.", 'start': 613.921, 'duration': 1.5}, {'end': 618.042, 'text': "I'm going to hit refresh here and look at that.", 'start': 615.461, 'duration': 2.581}, {'end': 619.402, 'text': 'My box is huge now.', 'start': 618.142, 'duration': 1.26}, {'end': 622.243, 'text': 'Padding and margin both work in a very similar way.', 'start': 619.683, 'duration': 2.56}, {'end': 624.364, 'text': 'They both create empty space.', 'start': 622.923, 'duration': 1.441}, {'end': 628.685, 'text': 'The difference is margins create empty space without a background color.', 'start': 624.724, 'duration': 3.961}, {'end': 633.866, 'text': "Padding creates empty space with the background color, and that's a very big distinction.", 'start': 629.285, 'duration': 4.581}, {'end': 641.368, 'text': "The problem is if you don't have a background color, you don't see the difference, especially if you don't have a border either.", 'start': 634.526, 'duration': 6.842}], 'summary': 'Using consistent style, setting padding and margin to 10, demonstrating their impact on empty space and background color.', 'duration': 45.979, 'max_score': 582.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI582706.jpg'}, {'end': 703.828, 'src': 'embed', 'start': 673.137, 'weight': 1, 'content': [{'end': 680.001, 'text': "Padding top 25 pixels, padding left 20, let's say 50 pixels.", 'start': 673.137, 'duration': 6.864}, {'end': 687.923, 'text': 'Padding right 100 pixels and padding bottom 300 pixels.', 'start': 680.681, 'duration': 7.242}, {'end': 690.144, 'text': "Let's make a big big padding on the bottom there.", 'start': 688.163, 'duration': 1.981}, {'end': 698.506, 'text': 'So I have my 25 on the top, 50 on the left, 100 on the right and my big 300 pixels down here on the bottom.', 'start': 691.144, 'duration': 7.362}, {'end': 703.828, 'text': "Both for margin and for padding they're shorthand for doing this if you want things to be different though.", 'start': 698.986, 'duration': 4.842}], 'summary': 'Setting padding values for top, left, right, and bottom in pixels.', 'duration': 30.691, 'max_score': 673.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI673137.jpg'}], 'start': 582.706, 'title': 'Css padding and margin', 'summary': 'Delves into the difference between padding and margin in css, highlighting their similar functionality and distinctions, and offers examples of shorthand notation for setting values.', 'chapters': [{'end': 761.862, 'start': 582.706, 'title': 'Understanding padding and margin', 'summary': 'Explains the difference between padding and margin in css, emphasizing their similar functionality and distinctions, and provides examples of using shorthand notation for setting values.', 'duration': 179.156, 'highlights': ['Padding and margin work similarly to create empty space, but margin does so without a background color while padding creates space with a background color.', 'Using shorthand notation for padding and margin allows setting different values for top, right, bottom, and left sides, with a clockwise order for specifying the values.', 'Creating a consistent style and sticking to it is emphasized, reducing the need for overwriting styles multiple times.']}], 'duration': 179.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI582706.jpg', 'highlights': ['Padding and margin work similarly to create empty space, but margin does so without a background color while padding creates space with a background color.', 'Using shorthand notation for padding and margin allows setting different values for top, right, bottom, and left sides, with a clockwise order for specifying the values.', 'Creating a consistent style and sticking to it is emphasized, reducing the need for overwriting styles multiple times.']}, {'end': 1126.684, 'segs': [{'end': 848.581, 'src': 'embed', 'start': 819.718, 'weight': 2, 'content': [{'end': 822.5, 'text': 'You can add a third value in there, so 100 and 200 pixels.', 'start': 819.718, 'duration': 2.782}, {'end': 830.389, 'text': 'means 100 on the top, 0 left and right, and 200 on the bottom.', 'start': 826.627, 'duration': 3.762}, {'end': 832.711, 'text': 'So my left and right are the same.', 'start': 831.15, 'duration': 1.561}, {'end': 835.473, 'text': 'My top is this and my bottom is right there.', 'start': 833.111, 'duration': 2.362}, {'end': 837.314, 'text': 'And you can do that for your padding as well.', 'start': 835.713, 'duration': 1.601}, {'end': 843.198, 'text': "And let's just change that one back to 100.", 'start': 840.256, 'duration': 2.942}, {'end': 848.581, 'text': 'Now, the last thing to remember with the box model is the way widths are calculated.', 'start': 843.198, 'duration': 5.383}], 'summary': 'The box model allows adding a third value for padding, with an example of 100 on top and bottom, and 0 on left and right.', 'duration': 28.863, 'max_score': 819.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI819718.jpg'}, {'end': 911.74, 'src': 'embed', 'start': 876.975, 'weight': 6, 'content': [{'end': 878.816, 'text': 'The blue box there has the width of 300 pixels on it.', 'start': 876.975, 'duration': 1.841}, {'end': 890.132, 'text': 'So I have a 300 pixel box, but then on the left and the right, I have an extra 25 pixels of padding.', 'start': 881.57, 'duration': 8.562}, {'end': 891.733, 'text': 'So I have 25 pixels here and I have 25 pixels here.', 'start': 890.332, 'duration': 1.401}, {'end': 895.214, 'text': 'And then I have an extra 10 pixels here and an extra 10 pixels here.', 'start': 892.173, 'duration': 3.041}, {'end': 899.575, 'text': 'And then I have an extra 100 pixels here and one extra pixels here, 100 extra pixels here.', 'start': 895.234, 'duration': 4.341}, {'end': 911.74, 'text': 'All of this together is what gives me my total width.', 'start': 909.159, 'duration': 2.581}], 'summary': 'A 300 pixel box with 25px padding on left and right, 10px on top and bottom, and 100px on each side.', 'duration': 34.765, 'max_score': 876.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI876975.jpg'}, {'end': 982.264, 'src': 'embed', 'start': 936.377, 'weight': 0, 'content': [{'end': 946.141, 'text': 'plus padding of 25 on the left, plus a padding of 25 on the right, plus a border of 10, plus a border of 10,', 'start': 936.377, 'duration': 9.764}, {'end': 949.477, 'text': "which should give me let's see how fast I can do my math 3, 4, 5, 5, 50, 5, 60, 5, 70..", 'start': 946.141, 'duration': 3.336}, {'end': 950.603, 'text': 'Hopefully I got that right.', 'start': 949.483, 'duration': 1.12}, {'end': 952.904, 'text': 'Gives me a total width of 570 pixels.', 'start': 950.623, 'duration': 2.281}, {'end': 965.738, 'text': "Right now, this might not seem like the most important thing to remember, but very soon we're going to have two things that go next to each other.", 'start': 960.476, 'duration': 5.262}, {'end': 969.499, 'text': "And if they run out of room, they don't go next to each other anymore.", 'start': 966.358, 'duration': 3.141}, {'end': 971.06, 'text': 'They fall one on top of each other.', 'start': 969.559, 'duration': 1.501}, {'end': 976.662, 'text': 'So understanding how the box model works, we have our margins, our border and our padding.', 'start': 971.88, 'duration': 4.782}, {'end': 982.264, 'text': 'So margin is empty space around my block.', 'start': 977.442, 'duration': 4.822}], 'summary': "Total width of 570 pixels, understanding the box model's margins, borders, and padding.", 'duration': 45.887, 'max_score': 936.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI936377.jpg'}, {'end': 1110.762, 'src': 'embed', 'start': 1081.916, 'weight': 5, 'content': [{'end': 1084.218, 'text': "And it's important to remember, and they also go in that order.", 'start': 1081.916, 'duration': 2.302}, {'end': 1092.024, 'text': "I didn't mention that, but it's always my box, my padding, my border, and then my margins on the outside of that.", 'start': 1084.238, 'duration': 7.786}, {'end': 1093.886, 'text': "And it's always going to be in that order.", 'start': 1092.185, 'duration': 1.701}, {'end': 1096.428, 'text': "It doesn't matter which way you write it here.", 'start': 1093.986, 'duration': 2.442}, {'end': 1098.33, 'text': 'If padding comes first.', 'start': 1097.149, 'duration': 1.181}, {'end': 1101.673, 'text': "It's still gonna look exactly the same.", 'start': 1099.991, 'duration': 1.682}, {'end': 1104.096, 'text': "You can't change the order of them.", 'start': 1102.094, 'duration': 2.002}, {'end': 1108.42, 'text': "So that's it for this video Hope you liked it and I'll see you in the next video.", 'start': 1104.596, 'duration': 3.824}, {'end': 1110.762, 'text': "We're gonna keep getting through this very soon.", 'start': 1108.46, 'duration': 2.302}], 'summary': 'Css box model order is important, in the sequence of box, padding, border, and margins.', 'duration': 28.846, 'max_score': 1081.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI1081916.jpg'}], 'start': 761.862, 'title': 'Css box model and total width calculation', 'summary': 'Covers css box model, padding, margin properties, width calculation, and total width calculation with specific examples, highlighting the importance of understanding these concepts for web layout design.', 'chapters': [{'end': 848.581, 'start': 761.862, 'title': 'Css box model and width calculation', 'summary': 'Explains the css box model, including padding and margin properties, and how to use different values for top, bottom, left, and right sides, ultimately discussing the calculation of widths.', 'duration': 86.719, 'highlights': ['Explaining the usage of different values for top, bottom, left, and right sides, such as 100 pixels for top and bottom and 0 for left and right, demonstrating the efficiency of this method for setting margins and padding.', 'Demonstrating the use of a third value for setting margins and padding, such as 100 and 200 pixels for top and bottom and 0 for left and right, showcasing the flexibility of this approach.', 'Clarifying the calculation of widths within the box model, serving as a crucial aspect to remember when working with CSS layouts.']}, {'end': 952.904, 'start': 849.342, 'title': 'Box width and total width calculation', 'summary': 'Explains the calculation of the total width of a box, which includes 300 pixels width, 25 pixels padding on each side, 10 pixels border on each side, and 100 pixels margin on each side, resulting in a total width of 570 pixels.', 'duration': 103.562, 'highlights': ['The total width of the box is 570 pixels The box has a width of 300 pixels, 25 pixels padding on each side, 10 pixels border on each side, and 100 pixels margin on each side, resulting in a total width of 570 pixels.', 'The box has 25 pixels padding on each side There is 25 pixels of padding on both the left and right sides of the box.', 'The box has 10 pixels border on each side There is a 10-pixel border on both the left and right sides of the box.']}, {'end': 1126.684, 'start': 960.476, 'title': 'Understanding css box model', 'summary': 'Explains the css box model, which includes margins, borders, and padding, and how they affect the total size of an element, emphasizing the importance of understanding these concepts for web layout design.', 'duration': 166.208, 'highlights': ['The box model consists of margins, borders, and padding, which add to the total size of an element, impacting the layout design. Understanding these aspects is crucial for web development and design.', 'The order of the box model components is important: box, padding, border, and margins, with padding being the first to add to the total size of the element.', "Applying a width of 300 pixels and a padding of 500 pixels results in the element exceeding the specified width, causing scroll bars to appear, demonstrating the impact of padding on the element's size."]}], 'duration': 364.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M6coJNLFBWI/pics/M6coJNLFBWI761862.jpg', 'highlights': ['Understanding the calculation of widths within the box model is crucial for CSS layouts.', 'The box model consists of margins, borders, and padding, impacting the layout design.', 'Explaining the usage of different values for top, bottom, left, and right sides demonstrates the efficiency of setting margins and padding.', 'Demonstrating the use of a third value for setting margins and padding showcases the flexibility of this approach.', 'The total width of the box is 570 pixels, comprising width, padding, border, and margin.', 'The order of the box model components is important: box, padding, border, and margins.', "Applying a width of 300 pixels and a padding of 500 pixels results in the element exceeding the specified width, demonstrating the impact of padding on the element's size."]}], 'highlights': ['The box model consists of margins, borders, and padding, impacting the layout design.', 'Understanding the calculation of widths within the box model is crucial for CSS layouts.', 'The speaker introduces the CSS Box Model, covering margin, padding, and border properties.', 'The speaker demonstrates the impact of border properties by changing their values and order, showcasing how the visual output changes based on properties such as width, color, and style.', 'Using shorthand notation for padding and margin allows setting different values for top, right, bottom, and left sides, with a clockwise order for specifying the values.', 'Creating a consistent style and sticking to it is emphasized, reducing the need for overwriting styles multiple times.', 'Explaining the usage of different values for top, bottom, left, and right sides demonstrates the efficiency of setting margins and padding.', 'Demonstrating the use of a third value for setting margins and padding showcases the flexibility of this approach.', 'The total width of the box is 570 pixels, comprising width, padding, border, and margin.', 'The speaker explains the impact of CSS comments and the importance of using CSS comments instead of HTML comments.']}