How to use Padding within a component

[Berenice22616018zvgd]

Good afternoon comunity, I am having some trouble to define padding for some of my component in Adobe XD. I am looking to add padding for single elements inside a component (on the red zones on both pictures). Does anyone know how to do this ? It goes with a question about adding a minimum padding (for example, "be responsive until a certain measure)

Thanks all !

B

{Renamed By MOD}

[AkinGn · Accepted solution]

Hi, it looks like actually you're talking about spacing between elements, and margins in some cases (I'm not sure if you're familiar with the concept of padding/margin but here's an article if you'd like to check: https://uxdesign.cc/margin-padding-ed80042494e1 ) Thinking what I'd do in a similar situation, maybe defining an invisible/zero opacity element in a certain size (like 30px width etc) as a spacing component (with a name like: 30pxHorizontalSpace etc) might be a flexible solution. And/or, creating seperate components for the common "in between/seperator" elements like "|", ">" and placing them into an invisible rectangle which has required amount of padding might be another flexible solution. Thanks for sharing since this might be something I also and some other users might want to use, hope this helps!

[Berenice22616018zvgd]

Yes exactly, thank you very much. I was indeed wondering if Adobe XD provided margins, but then thanks to your explanations "shadow spacing" will be my best option ! Thank you very much !

[AkinGn]

Glad I was helpful, margins are in a grey area in comparison to padding since it is something that happens outside of an element, but for now as you said "shadow spacing", or using an "outer element as a container for padding" etc might help, happy designing!