Mastering the CSS Box Model

Опубликовано: 16 Сентябрь 2021
на канале: 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

Смотрите видео Mastering the CSS Box Model онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 16 Сентябрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,418 раз и оно понравилось 173 людям.

785