Learn the CSS box model, layout basics, positioning schemes, and float property to control element layout and spacing.
Understand the CSS box model and how elements are rendered as boxes. This chapter introduces the concept of the box model as the foundation of CSS layout.
Learn about the content area and how content size affects layout. This chapter explains the core content area inside the box model.
Explore padding properties and their impact on element size. Understand how padding creates space inside the border around content.
Understand border properties and how borders affect box dimensions. Learn how borders visually separate content and padding from outside elements.
Learn about margin properties, collapsing margins, and spacing between elements. Understand how margins create space outside the border.
Understand content-box vs border-box and how box-sizing affects element dimensions. Learn to control box size calculation for layout precision.
Explore block, inline, and inline-block display types and their use cases. Understand how display affects element layout and flow.
Learn about static positioning, the default positioning scheme. Understand how elements are positioned naturally in the document flow.
Understand relative positioning and how it moves elements relative to their normal position without affecting other elements.
Explore absolute positioning and how elements are positioned relative to the nearest positioned ancestor or the viewport.
Learn about fixed positioning and how elements stay fixed relative to the viewport even when scrolling.
Understand sticky positioning and how elements switch between relative and fixed based on scroll position.
Explore how different positioning schemes affect the flow of elements in the document and their interaction.
Learn how to use offset properties to move positioned elements precisely within their containing block.
Understand stacking context and how z-index controls layering and visibility of overlapping elements.
Learn about common issues and pitfalls when using CSS positioning and how to avoid them.
Explore how the float property works and how to use it for layout, including clearing floats.