Css Box Model

⬅ Back to Main Page

Core Layers:-

🔹Content

widthClick for details
heightClick for details
min-widthClick for details
max-widthClick for details
min-heightClick for details
max-heightClick for details

🔹Padding

padding (shorthand)Click for details
padding-topClick for details
padding-rightClick for details
padding-bottomClick for details
padding-leftClick for details

🔹Border

border (shorthand)Click for details
border-widthClick for details
border-styleClick for details
border-colorClick for details
border-radiusClick for details

🔹Margin

margin (shorthand)Click for details
margin-topClick for details
margin-rightClick for details
margin-bottomClick for details
margin-leftClick for details

🔹Sizing & Box Behaviour

box-sizing (content-box, border-box)Click for details
aspect-ratioClick for details

🔹 Positioning & Layout

display (block, inline, inline-block, flex, grid, etc.)Click for details
position (static, relative, absolute, fixed, sticky)Click for details
topClick for details
rightClick for details
bottomClick for details
leftClick for details
z-indexClick for details
floatClick for details
clearClick for details

🔹 Overflow & Clipping

overflow (visible, hidden, scroll, auto)Click for details
overflow-xClick for details
overflow-yClick for details
clip-pathClick for details
visibilityClick for details

🔹 Visual Extras

outlineClick for details
outline-offsetClick for details
box-shadowClick for details

🔹 Advanced Concepts

Margin collapsingClick for details
Inline vs block differencesClick for details
Line box formationClick for details
Flexbox/Grid integration with box modelClick for details
Stacking context (z-index, position, opacity)Click for details