How can I add Margin in Jetpack Compose?
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
Jetpack Compose does not have a direct margin modifier like the old Android view system. In Compose, spacing is usually expressed by padding on the parent or child, by layout arrangement, or by Spacer composables depending on what kind of gap you want.
Why There Is No Margin Modifier
In the classic view system, margin was a layout parameter owned by the parent. Compose keeps layout rules more explicit and pushes spacing decisions into modifiers and container layout logic.
That means when you ask for "margin" in Compose, you usually mean one of these:
- space around a composable relative to its parent
- space between siblings
- extra outer spacing inside a container
The solution depends on which one you mean.
Use Modifier.padding() For Outer Space
For most everyday cases, Modifier.padding() gives the effect people expect from margin.
This adds space outside the Text relative to the parent layout's measurement. In practice, that is the Compose equivalent of a simple margin request.
You can also target individual sides:
Use Parent Padding When The Whole Section Needs Inset
If multiple children should all be inset together, put the padding on the parent instead of repeating it on every child.
This is often cleaner than applying separate margin-like padding to each child.
Use Arrangement Or Spacer Between Siblings
If the real goal is space between items, use the layout container's arrangement or a Spacer.
Or:
This is better than faking every gap with unrelated padding when the spacing is really between siblings.
Be Careful With offset
Some developers try Modifier.offset() as a margin substitute. That usually causes confusion because offset moves the drawing position but does not reserve layout space in the same way.
Use offset for deliberate positional adjustments, not for ordinary layout spacing.
Compose Example With A Card
Here is a realistic pattern:
Notice the distinction:
- outer
paddingon theCardacts like margin relative to neighboring content - inner
paddinginside theCardcreates content inset
That separation is one of the most useful Compose layout habits to learn.
A Good Rule Of Thumb
Ask yourself who owns the space:
- if the child needs breathing room relative to the parent, use padding on the child
- if the whole group needs inset, use padding on the parent
- if siblings need uniform gaps, use
Arrangement.spacedBy - if one-off vertical or horizontal gaps are needed, use
Spacer
Once you think in those terms, the lack of a dedicated margin API stops being a problem.
Common Pitfalls
- Looking for a literal margin modifier that does not exist in Compose.
- Using
offsetwhen the goal is layout spacing. - Adding repeated child padding when parent padding would express the layout more clearly.
- Using padding to create sibling gaps when
Arrangement.spacedByis the cleaner tool. - Forgetting the difference between outer spacing and inner content padding.
Summary
- Jetpack Compose has no dedicated margin modifier.
- '
Modifier.padding()is the usual margin-like solution for outer space around a composable.' - Use parent padding for section inset and
Arrangement.spacedByorSpacerfor gaps between siblings. - Use
offsetonly for positional adjustment, not ordinary margin behavior. - Think in terms of which layout element owns the spacing rather than trying to copy XML margin rules exactly.

