Comprendiendo las diferencias entre Margin & Padding y las propiedades de Translations

¡¡Hola!! ¡Feliz Navidad a todos! 🌲 Esta vez aprenderemos sobre dos cosas de las cuales he recibido algunas preguntas, pueden ser fácilmente confundidas ya que ambas propiedades manejan los mismos valores y se comportan de manera similar, estoy hablando de las propiedades de Padding y Margin, en muchas ocasiones tendemos a usarlas como propiedades “equivalentes” pero es importante comprender cuál es la diferencia y el resultado de aplicar una propiedad u otra.

¡Empecemos!

En primer lugar recordemos el significado de los valores que reciben las propiedades Margin y Padding.

La propiedad Margin representa la distancia entre un elemento y sus elementos adyacentes, se usa para controlar la posición de representación del elemento y de sus vecinos, mientras que la propiedad Padding representa la distancia entre un elemento y sus elementos secundarios y se utiliza para separar un control desde su propio contenido.

Por ejemplo, agreguemos cuatro botones, veremos dos pantallas las cuales tendrán las propiedades de Padding y Margin respectivamente con los vales “0,300,0,0”.

Hay dos propiedades que nos permiten trasladar nuestros controles sobre los ejes Y y X (TranslationY y TranslationX) independientemente de los elementos que lo rodean. Esta propiedad recibe un valor entero (Integer). Lo que más me gusta de esta propiedad es que es muy útil hacer interfaces de usuario más interesantes, diferentes y divertidas ya que me permite superponer mis controles dentro de la página. 😎

¡Practiquemos!

En el primer escenario agregamos el primer botón la propiedad TranslationY con un valor de “300” y el segundo la propiedad TranslationX con un valor de “80”.

I'm Leomaris Reyes, Microsoft MVP from the Dominican Republic, with more than 6 years of experience in Software Development. ❤

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store