Mastering the CSS Box Model

Published: 16 September 2021
on channel: Craig A. Bourne

4,418

173

► Every element on a web page is rendered by the browser as a box. Whether it's paragraph text, a heading, a button, a div, a span, a link, or an image, every single element on a web page is a box that is made up of several properties.

To be able to create cohesive layouts, it is important to understand the properties associated with these boxes so we can manipulate them. We can make the boxes bigger or smaller, and change the space inside or around them.

The parts of the Box Model are:

The content box
Padding
Borders
Margin

Padding is the internal space of an element that sits between the content and the border.

Margin is the buffer or the space outside the border between the element and any other elements on the page.

In this video, we'll look at all of these different parts and how they work. We will learn how margins of some elements collapse (sometimes), and also how we can know how the browser is calculating the size of elements.

► Timestamps:
0:00 Start
0:52 The content box + width & height
5:05 Borders
7:29 Padding
12:18 Margin
14:51 Margin collapsing
16:49 Box sizing
20:10 Summary

► Get the code:
Starting CodePen - https://codepen.io/craigabourne/pen/y...
Finished CodePen - https://codepen.io/craigabourne/pen/z...

► Links used in the video:
CSS Reference - https://cssreference.io/
The CSS Box Model - https://developer.mozilla.org/en-US/d...
Padding - https://developer.mozilla.org/en-US/d...
Border - https://developer.mozilla.org/en-US/d...
Margin - https://developer.mozilla.org/en-US/d...
Margin Collapsing - https://developer.mozilla.org/en-US/d...
Box Sizing - https://developer.mozilla.org/en-US/d...
CSS Units - https://developer.mozilla.org/en-US/d...

► This video is part of the CSS for Absolute Beginners playlist:    • CSS for Absolute Beginners

► Social Media:
  / craigabourne
  / craigabourne

► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne

Watch video Mastering the CSS Box Model online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 16 September 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,418 once and liked it 173 people.

106