Box model and layout

6 lessons in the CSS course.

Full CSS course · Search this topic · Web

• The Box ModelUnderstand content, padding, border, margin, sizing, and overflow.
• Margin and PaddingCreate consistent inner and outer spacing with logical properties and shorthand.
• Display and VisibilityControl box behavior and hide content without confusing users.
• PositioningUse relative, absolute, fixed, and sticky positioning while preserving document flow.
• FlexboxArrange items in one dimension with flexible sizing, alignment, wrapping, and gaps.
• CSS GridBuild two-dimensional layouts with tracks, gaps, placement, and responsive repetition.