7. Page Layout
HTML/CSS Lesson Categories
The box model is the foundation of CSS layout. Every HTML element is a box with content, padding, border, and margin — and understanding how those layers interact is the key to controlling spacing and layout. These lessons also cover the display property, floats, centering techniques, and how to use negative space effectively in your designs.
Ready to test your knowledge?
7.1 The Display Property
Learn the difference between block and inline elements, how to change any element’s display behavior with CSS, and when to use inline-block. Start the The Display Property Lesson
7.2 Making Elements Disappear with CSS
Learn how display: none removes elements from the layout entirely, why you would want to hide something, and how it differs from visibility: hidden. Start the Making Elements Disappear with CSS Lesson
7.3 Margin, Padding, and White Space
Learn how CSS padding creates space between an element’s content and its border, and how to control it independently on each side. Start the The Box Model and CSS Padding Lesson
7.4 The Box Model
Discover how the CSS Box Model ties together content, padding, border, and margin into a predictable system for sizing and spacing every element on your page. Start the Negative Space: Margin and Padding Lesson
7.5 Centering Content with CSS
Master the most common techniques for centering elements horizontally and vertically, a must-know skill that every web developer eventually needs. Start the Centering Content with CSS Lesson
7.6 CSS Float: How to Wrap and Position Elements
Learn how the CSS float property works to wrap text around images and create side-by-side layouts, plus how to clear floats when they affect surrounding content. Start the CSS Float: How to Wrap and Position Elements Lesson