Widget TreeIntermediate30 XP3 min read
How does Flutter's box model compare to CSS box model?
TL;DR: Flutter doesn't have a traditional CSS box model. Padding is an explicit widget. 'Margin' is achieved with Padding on a parent or Container margin. There's no box-sizing property — all sizing is through constraints.
Full Answer
Web developers moving to Flutter often look for CSS box-model equivalents. Flutter's layout is fundamentally different — everything is widgets and constraints.
| Aspect | CSS | Flutter |
|---|---|---|
| Padding | padding property on element | Padding widget wrapping child |
| Margin | margin property | Padding on parent, or Container(margin:) |
| Border | border property | Container(decoration: BoxDecoration(border:)) |
| Width/Height | width/height CSS properties | SizedBox, Container, ConstrainedBox |
| Box sizing | box-sizing: border-box/content-box | Not applicable — all via constraints |
🎯
Container is a convenience widget that combines Padding, ColoredBox, DecoratedBox, SizedBox, ConstrainedBox, and Transform in one. Prefer using the individual widgets for clarity and performance.
Code Examples
dartCSS box-model equivalent in Flutter
Output
A 200px wide white box with 16px inner padding, 8px outer margin, and 1px black border
Common Mistakes
- ✗Using Container for every wrapper — prefer Padding, ColoredBox, or SizedBox for single-purpose styling
- ✗Expecting margin to collapse like in CSS — Flutter margins don't collapse
Interview Tip
💡
This shows cross-platform awareness. Mentioning that Container is a multi-purpose convenience widget shows you understand its internals.
#box-model#CSS#padding#margin#constraints