Añadiendo Espacio con Márgenes y Relleno
Las propiedades margin, padding y border permiten agregar más espacio a los elementos, mejorando la apariencia, legibilidad y usabilidad del recurso web. Analicemos cada una de ellas en detalle.
Propiedades margin y padding
padding
padding se refiere al espacio entre el contenido de un elemento y su borde.
padding: top right bottom left
Disponemos de varias formas para asignar un valor al padding.
Forma abreviada
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Cada padding por separado
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin se refiere al espacio entre un elemento y los elementos adyacentes. Es el área situada fuera del borde del elemento.
margin: top right bottom left
Podemos asignar el margin de varias maneras.
Forma abreviada
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Cada margen por separado
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Propiedad border
border se refiere a la línea que rodea el padding y el contenido de un elemento. Es el área que separa el contenido del elemento de su margen.
border: width style color;
Forma abreviada
border: 4px solid brown;
Significa que el borde de todos los lados será igual. Su width es 4px, el style es solid y el color es brown.
Consideremos el siguiente ejemplo y analicemos los posibles estilos de borde:
index.html
styles.css
Salida
Cada borde por separado
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. ¿Cuál es la diferencia entre margin y padding en CSS?
2. ¿Cuál es el propósito de la propiedad border?
3. ¿Cómo podemos aplicar diferentes valores de margin a los distintos lados de un elemento?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.56Añadiendo Espacio con Márgenes y Relleno
Desliza para mostrar el menú
Las propiedades margin, padding y border permiten agregar más espacio a los elementos, mejorando la apariencia, legibilidad y usabilidad del recurso web. Analicemos cada una de ellas en detalle.
Propiedades margin y padding
padding
padding se refiere al espacio entre el contenido de un elemento y su borde.
padding: top right bottom left
Disponemos de varias formas para asignar un valor al padding.
Forma abreviada
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Cada padding por separado
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin se refiere al espacio entre un elemento y los elementos adyacentes. Es el área situada fuera del borde del elemento.
margin: top right bottom left
Podemos asignar el margin de varias maneras.
Forma abreviada
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Cada margen por separado
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Propiedad border
border se refiere a la línea que rodea el padding y el contenido de un elemento. Es el área que separa el contenido del elemento de su margen.
border: width style color;
Forma abreviada
border: 4px solid brown;
Significa que el borde de todos los lados será igual. Su width es 4px, el style es solid y el color es brown.
Consideremos el siguiente ejemplo y analicemos los posibles estilos de borde:
index.html
styles.css
Salida
Cada borde por separado
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. ¿Cuál es la diferencia entre margin y padding en CSS?
2. ¿Cuál es el propósito de la propiedad border?
3. ¿Cómo podemos aplicar diferentes valores de margin a los distintos lados de un elemento?
¡Gracias por tus comentarios!
