Content aware padding

Contributor ,
Jan 20, 2021 Jan 20, 2021

Copy link to clipboard

Copied

Just a quick question on padding. I'm sure this was behaving as I would expect before, but I am just trying to add some padding to a button a component, but it looks like it is adding a margin outside the button, rather than padding within it. Have attached a screenshot. Any idea what I'm doing wrong? Thank you!

TOPICS
Design, How to

Views

292

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Employee , Jan 26, 2021 Jan 26, 2021
I would suggest selecting the component from the layer panel and then try to apply the padding and see if that helps. As sometimes the right object is not selected which might cause the problem.   Please let me know if you need further assistance. I would be happy to help.   Thanks, Harshika

Likes

translate

Translate

Translate
Adobe Employee ,
Jan 20, 2021 Jan 20, 2021

Copy link to clipboard

Copied

Hi John,

 

Thank you for reaching out. Padding is actually the distance from the visual background to the edge of the content on each side identified by a stretched background. In order to learn how to apply padding to a component or group. Please check this article: Adobe XD User Guide for detail understanding.

 

You may also go through this short video of content-aware layout which is amazing and easily understandable: Content-Aware Layout in Adobe XD | Let's XD

 

Let us know if you need further assistance from us. We would be happy to help.

 

Thanks,

Harshika

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 20, 2021 Jan 20, 2021

Copy link to clipboard

Copied

Thanks Harshika. I'm still missing something I think. In my example, are the edges of the button not the edge of the content?

 

I've attached another inage showing the button selected, with no padding applied. And also with 10px padding applied, showing it extend beyong the edge of the selected button.

 

xd_button_padding.png

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 20, 2021 Jan 20, 2021

Copy link to clipboard

Copied

OK - I have it working with a new button. My issue may have something to do with the fact that I have a bit of shadow extending out a bit further in the hover state.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 20, 2021 Jan 20, 2021

Copy link to clipboard

Copied

Nope - wasn't that either. Its very strange - I'm trying to work backwards with the buttons I have, but can't see why its not working on them but is working if I create a new one.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

I would suggest selecting the component from the layer panel and then try to apply the padding and see if that helps. As sometimes the right object is not selected which might cause the problem.

 

Please let me know if you need further assistance. I would be happy to help.

 

Thanks,

Harshika

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines