Propriedade Margin e Padding

Manipulando espaços nos elementos

Margin

É a margem do elemento, ou seja, o espaçamento externo do elemento.

Algumas formas de escrita:

margin-top

Define a margem superior do elemento.

div {
  margin-top: 10px;
}

margin-right

Define a margem direita do elemento.

div {
  margin-right: 20px;
}

margin-bottom

Define a margem inferior do elemento.

div {
  margin-bottom: 30px;
}

margin-left

Define a margem esquerda do elemento.

div {
  margin-left: 40px;
}

margin

Define a margem do elemento. Este tipo de declaração pode ser dar de diversas formas.

/* t = topo; d = direita; b = baixo; e = esquerda; */
.div1 {
  /* t = 20px; d = 20px; b = 20px; e = 20px; */
  margin: 20px;
}
.div2 {
  /* t = 10px; d = 20px; b = 10px; e = 20px; */
  margin: 10px 20px;
}
.div3 {
  /* t = 10px; d = 20px; b = 30px; e = 20px; */
  margin: 10px 20px 30px;
}
.div4 {
  /* t = 10px; d = 20px; b = 30px; e = 40px; */
  margin: 10px 20px 30px 40px;
}

Padding

É o preenchimento do elemento, ou seja, o espaçamento interno do elemento.

Algumas formas de escrita:

padding-top

Define o preenchimento superior do elemento.

div {
  padding-top: 10px;
}

padding-right

Define o preenchimento direito do elemento.

div {
  padding-right: 20px;
}

padding-bottom

Define o preenchimento inferior do elemento.

div {
  padding-bottom: 30px;
}

padding-left

Define o preenchimento esquerdo do elemento.

div {
  padding-left: 40px;
}

padding

Define o preenchimento geral do elemento. Assim como na margem, o padding pode declarado de várias formas.

/* t = topo; d = direita; b = baixo; e = esquerda; */
.div1 {
  /* t = 20px; d = 20px; b = 20px; e = 20px; */
  padding: 20px;
}
.div2 {
  /* t = 10px; d = 20px; b = 10px; e = 20px; */
  padding: 10px 20px;
}
.div3 {
  /* t = 10px; d = 20px; b = 30px; e = 20px; */
  padding: 10px 20px 30px;
}
.div4 {
  /* t = 10px; d = 20px; b = 30px; e = 40px; */
  padding: 10px 20px 30px 40px;
}

Esta página está em construção. Volte em breve ou ajude a completá-la!