Propriedade Margin e Padding Manipulando espaços nos elementos

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.
    

  1. div {
    2. 

  2.   margin-top: 10px;
    3. 

  3. }
    4.
margin-right
Define a margem direita do elemento.
    

  1. div {
    2. 

  2.   margin-right: 20px;
    3. 

  3. }
    4.
margin-bottom
Define a margem inferior do elemento.
    

  1. div {
    2. 

  2.   margin-bottom: 30px;
    3. 

  3. }
    4.
margin-left
Define a margem esquerda do elemento.
    

  1. div {
    2. 

  2.   margin-left: 40px;
    3. 

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

  1. /* t = topo; d = direita; b = baixo; e = esquerda; */
    2. 

  2. .div1 {
    3. 

  3.   /* t = 20px; d = 20px; b = 20px; e = 20px; */
    4. 

  4.   margin: 20px;
    5. 

  5. }
    6. 

  6. .div2 {
    7. 

  7.   /* t = 10px; d = 20px; b = 10px; e = 20px; */
    8. 

  8.   margin: 10px 20px;
    9. 

  9. }
    10. 

  10. .div3 {
    11. 

  11.   /* t = 10px; d = 20px; b = 30px; e = 20px; */
    12. 

  12.   margin: 10px 20px 30px;
    13. 

  13. }
    14. 

  14. .div4 {
    15. 

  15.   /* t = 10px; d = 20px; b = 30px; e = 40px; */
    16. 

  16.   margin: 10px 20px 30px 40px;
    17. 

  17. }
    18.

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.
    

  1. div {
    2. 

  2.   padding-top: 10px;
    3. 

  3. }
    4.
padding-right
Define o preenchimento direito do elemento.
    

  1. div {
    2. 

  2.   padding-right: 20px;
    3. 

  3. }
    4.
padding-bottom
Define o preenchimento inferior do elemento.
    

  1. div {
    2. 

  2.   padding-bottom: 30px;
    3. 

  3. }
    4.
padding-left
Define o preenchimento esquerdo do elemento.
    

  1. div {
    2. 

  2.   padding-left: 40px;
    3. 

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

  1. /* t = topo; d = direita; b = baixo; e = esquerda; */
    2. 

  2. .div1 {
    3. 

  3.   /* t = 20px; d = 20px; b = 20px; e = 20px; */
    4. 

  4.   padding: 20px;
    5. 

  5. }
    6. 

  6. .div2 {
    7. 

  7.   /* t = 10px; d = 20px; b = 10px; e = 20px; */
    8. 

  8.   padding: 10px 20px;
    9. 

  9. }
    10. 

  10. .div3 {
    11. 

  11.   /* t = 10px; d = 20px; b = 30px; e = 20px; */
    12. 

  12.   padding: 10px 20px 30px;
    13. 

  13. }
    14. 

  14. .div4 {
    15. 

  15.   /* t = 10px; d = 20px; b = 30px; e = 40px; */
    16. 

  16.   padding: 10px 20px 30px 40px;
    17. 

  17. }
    18.
Esta página está em construção. Volte em breve ou

Postagens mais visitadas