S02 L06 CSS Border, Padding, Height and Width

📘 CSS BORDER, PADDING, HEIGHT AND WIDTH

In this lesson, we build a practical understanding of the CSS box model by styling paragraphs with borders, spacing, and size controls.

You will see how border and padding affect layout, and how height/width settings interact with content flow.

🎯 IN THIS VIDEO

Add borders using individual properties and shorthand syntax
Set border radius to create rounded corners
Add padding to create space between text and border
Use one, two, or four padding values effectively
Understand default auto behavior for height and width
Force fixed height/width values and observe layout impact
Handle content overflow with overflow: hidden
See how size settings respond as viewport width changes
🚀 HOW TO USE THIS COURSE

This lesson gives you core sizing and spacing tools used in almost every UI.
Master these basics before moving into margin and more advanced layout techniques.

👉 Course Website:
www.richardbraycourses.co.uk

👉 Course Repositories:
www.github.com/RichardBrayCourses

👉 Full course playlist:
https://youtube.com/playlist?list=PLNlOxdq7xu14b5ewH4IJC9tMinkgZBuVR&si=Pg8pEDR5UUbQstz6

📂 SECTION REPOSITORY

Section 2 repository:
https://github.com/RichardBrayCourses/frontend02-html-css

💡 NOTE

When fixed heights are too small for content, overflow handling becomes important to prevent text from spilling into nearby elements.

Видео S02 L06 CSS Border, Padding, Height and Width канала richardbraycourses