Tema 13Diferentes Formas de Usar  Margin y Padding

En los ejemplos de arriba utilizamos la propiedad con uno o más valores. Dependiendo del número de valores, las propiedades de margin y padding pueden tener diferentes efectos:

margin: 20px;
y
padding: 20px;
Utilizar un solo valor modifica uniformemente los márgenes y padding en las 4 direcciones (arriba, abajo, izquierda y derecha).
margin: 80px 40px;
y
padding: 80px 40px;
Cuando utilizamos 2 valores, el primer valor corresponde a la distancia vertical y el segundo la horizontal.
margin: 20px 100px 30px;
y
padding: 20px 100px 30px;
Para 3 valores, el primer valor corresponde al margen o padding de arriba, el segundo a la distancia horizontal y el tercero al de abajo.
margin: 20px 30px 10px 0px;
y
padding: 20px 30px 10px 0px;
Si utilizamos 4 valores, el primer valor corresponde al margen o padding de arriba, el segundo al de la derecha, el tercero al de abajo y el cuarto al de la izquierda.

Si sólo queremos modificar el margen o padding de una dirección específica, entonces utilizamos:

  • margin-left o padding-left: izquierda

  • margin-right o padding-right: derecha

  • margin-top o padding-top: arriba

  • margin-bottom o padding-bottom: abajo

La Propiedad Box-Sizing

En el ejemplo de padding utilizamos la propiedad box-sizing con un valor de border-box. Esto sirve para que el padding que agreguemos no aumente el tamaño de nuestro contenedor. En el ejemplo tenemos un ancho de 150px, y, si utilizamos padding sin border-box, el ancho podría aumentar. Es común utilizar la propiedad de box-sizing en todos los documentos para que los elementos mantengan un tamaño específico.

Copia el ejemplo y quita la propiedad de box-sizing. Observa lo que pasa.

Módulo 3

Tu Progreso

63%

Progreso General del Curso