Sitemap

Member-only story

Margin vs Padding — Jetpack Compose

4 min readJun 5, 2025

Before going ahead, let’s understand the difference between margin and padding

Margin: Adds space outside a view.

Padding: Adds space inside a view.

In Jetpack Compose, Margin and Padding help to control spacing around UI elements or composables.
Padding is directly supported by modifiers, but margin is not supported directly by modifiers. For that, we have to follow a different approach.

Let’s understand padding first.

Padding in Jetpack Compose

It adds space inside a composable, between its view and its boundary.

Modifiers:Modifier.padding()

All Sides:

Text(
text = "Padding Demo",
modifier = Modifier
.background(Color.Blue)
.padding(30.dp), //Space inside from all side in the Text composable
color = Color.White,
fontSize = 14.sp,
textAlign = TextAlign.Center,
)

Individual Side:

Text(
text = "Padding Demo",
modifier = Modifier
.background(Color.Blue)
.padding(top = 30.dp, bottom =…

--

--

Kishore Tanwar
Kishore Tanwar

Written by Kishore Tanwar

Hi, I’m Kishore Tanwar, a passionate Mobile App Developer from India, currently working as an SDE 2. Android | Flutter | React Native

No responses yet