S02 L08 CSS Display: Block, Inline, Inline-Block
📘 CSS DISPLAY PROPERTY — BLOCK, INLINE, INLINE-BLOCK
In this lesson, we compare the most important display modes and how they change layout behavior.
You will see how elements flow on the page in each mode, and whether width/height settings are respected.
🎯 IN THIS VIDEO
Understand the default display behavior of paragraph elements
Use display: block and see vertical stacking on new lines
Confirm that block elements respect width and height
Use display: inline and see horizontal flow on the same line
Understand why width and height are ignored for inline elements
Use display: inline-block as a hybrid mode
See inline-block keep horizontal flow while respecting size values
Preview how this leads into Flexbox in later lessons
🚀 HOW TO USE THIS COURSE
Get comfortable with display modes before moving into layout systems like Flexbox.
Most CSS positioning and layout issues become easier once display behavior is clear.
👉 Course Website:
www.richardbraycourses.co.uk
👉 Course Repositories:
www.github.com/RichardBrayCourses
👉 Full course playlist:
• Frontend Web Development Course — Section ...
📂 SECTION REPOSITORY
Section 2 repository:
https://github.com/RichardBrayCourses...
💡 NOTE
If an element is not respecting width/height, check whether it is inline rather than block or inline-block.