Understanding the CSS Display Property - block, inline, & inline-block

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

8,137

208

► The display property is responsible for how an element appears on the page. The main display properties (which we will cover in this video) are:

block
inline
inline-block

Elements with display: block occupy the horizontal space of their container, stretching the full width available to them. Their height is determined by what their content needs.They can accept height and width properties which allow us to control size.

Inline elements only occupy the space their content needs, they sit in line, or within the content flow of block elements. They do notaccept height and width properties.

Elements with display inline-block mix behaviors of the other two display types. Inline in that they don't occupy their own line and sit next to other inline and inline-block elements. But block in that the height and width properties can be used now. So we can manipulate their size.

► Timestamps:
0:00 Start
0:51 The CodePen
2:04 display: block;
2:56 display: inline;
3:45 display: inline-block;
5:51 Touching on display: flex;
7:11 Replaced elements
8:11 Summary

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

► Links used in the video:
The Display Property: https://developer.mozilla.org/en-US/d...
Block-level elements: https://developer.mozilla.org/en-US/d...
Inline-elements: https://developer.mozilla.org/en-US/d...
Inline-block elements: https://www.w3schools.com/css/css_inl...
Replaced elements: https://developer.mozilla.org/en-US/d...
Why does width/height work on an inline img element? https://stackoverflow.com/questions/5...

► 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 Understanding the CSS Display Property - block, inline, & inline-block online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 22 September 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,137 once and liked it 208 people.

106