CSS Paddings and Margins

padding

Las propiedades de padding especifican el ancho del área de relleno de un cuadro.

[Sintaxis]

padding-top: <length> | <percentage>
padding-right: <length> | <percentage>
padding-bottom: <length> | <percentage>
padding-left: <length> | <percentage>

Propiedad padding
    La propiedad de padding es una propiedad que permite configurar 'padding-top', 'padding-right', 'padding-bottom' y 'padding-left' en el mismo lugar en la hoja de estilos.

•  padding: 10px 20px; Los padding superiores e inferiores son 10px, los padding derecho e izquierdo son 20px.
• padding: 10px 20px 30px;   el padding superior es de 10px, los padding derecho e izquierdo son de 20px, el padding inferior es de 30px.
• padding: 10px 20px 30px 40px; el padding superior es de 10 píxeles, el padding derecho es de 20 píxeles, el padding inferior es de 30 píxeles, el padding izquierdo es de 40 píxeles.

Ejemplo

[style.css]

p{
  width: 300px;
  height: 100px;
  background-color: red;
}
p#pad{
  padding: 10px 20px;
}

[index.html]

<p>This is a paragraph</p>
<p id="pad">This is a parapraph with padding</p>

 

Ver también 8.4 Padding properties.

margin

Las propiedades de margin especifican el ancho del área de margen de un cuadro.

    El margen no tiene un color de fondo.

[Sintaxis] 

margin-top: <length> | <percentage>
margin-right: <length> | <percentage>
margin-bottom: <length> | <percentage>
margin-left: <length> | <percentage>

Propiedad margin
    La propiedad de margin es una propiedad abreviada para establecer 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left' en el mismo lugar en la hoja de estilos.

•  margen: 10px 20px; Los márgenes superior e inferior son 10px, los márgenes derecho e izquierdo son 20px.
• margen: 10px 20px 30px ; el margen superior es 10px, los márgenes derecho e izquierdo son 20px, el margen inferior es 30px.
• margen: 10px 20px 30px 40px; el margen superior es 10px, el margen derecho es 20px, el margen inferior es 30px, el margen izquierdo es 40px.

Ejemplo

[style.css]

p{
  width: 300px;
  height: 100px;
  background-color: red;
}
p#mar{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

[index.html] 

<p>This is a paragraph</p>
<p id="mar">This is a parapraph with margin</p>

 

Ver también 8.3 Margin properties.

Reto

1. Establece los rellenos y los márgenes de navegación lateral.

[style.css]

nav ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
nav ul li{
  font-size: 1.5em;
  padding-left: 7px;
  margin-bottom: 10px;
}

 

2. Organiza los contenidos en el centro de la ventana del navegador web. Cuando el valor de un margen izquierdo y un margen derecho se establece en "auto", el cuadro se organiza en el centro. Porque los márgenes izquierdo y derecho tienen el mismo valor.

[style.css]

#wrapper{
  width: 900px;
  margin: 0px auto;
}

 

Fuente: www.w3.org