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

Leomaris Reyes
Dec 29, 2019 · 3 min read

¡¡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.


Pensando de forma gráfica, ¿cuál es la diferencia entre las propiedades Margin y Padding? 🤔


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”.


Ahora aprendamos sobre las propiedades Translations 😍

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”.


Leomaris Reyes

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade