Understanding the differences between Margin & Padding and Translation properties

Hi!! And merry Christmas to all! This time we will be learning about two things I have received questions about, they may be easy to confuse because both properties handle the same values and behaves similarly, I’m talking about the Padding and Margin properties, on many occasions we tend to use them as “equivalent” properties, but it is important to understand what the difference is and the result of applying one property or another.

Let’s start!

First of all, let’s remember the meaning of the values that the Margin and Padding properties receives.

Margin property represents the distance between an element and its adjacent elements, is used to control the element’s rendering position and the rendering position of its neighbors, while the Padding property represents the distance between an element and its child elements, and is used to separate the control from its own content.

Thinking in a graphical way, what is the difference between Margin and Padding properties? ?

For example, let’s add four buttons, we’ll see two screens which have Padding and Margin properties respectively with “0,300,0,0” as values.

Now, let’s learn about Translations ?

There are two properties for Translation for both the Y and the X axis (TranslationY & TranslationX), these properties allows us to translate a specific graphic element in both axes, regardless of the elements around it. This property receives an Integer value. What I love most about this property is that it is very useful for me to make UI more interesting, different and funny because it allow me to overlap my controls within the page. ?

Let’s practice some uses!

In the first scenario we added the first button the TranslationY property with “300” as value and in the second the TranslationX property was added with “80” as value.

That’s it! I hope this article has been helpful to you!

Thanks for reading ?!!!

Spanish post: https://medium.com/@reyes.leomaris/comprendiendo-las-diferencias-entre-margin-padding-y-las-propiedades-de-translations-3743611e07aa

References: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding