Lesson Length -


Close Video


Let's Add Some Padding

The modifier probably most familiar to designers is Padding.

The default here is 16 all around, but we can click this icon to independently control for each edge.

T = Top Side
L = Left Side
B = Bottom Side
R = Right Side

Padding is going to create defined space around our element based on the values we enter.

We use padding in conjunction with Stacks to create responsive layouts, as covered in the previous Lesson on Stacks & Spacers, but Padding gives us a bit more control than only using auto Spacer elements.

Notice if we add padding to an Image that is set to Scale To Fill, our image then shrinks inwards to accommodate our padding.

That’s it for padding, next is Frames, another essential tool to use within our layouts that use stacks.

Was this lesson helpful?