Marxe
CSS define catro propiedades para controlar cada unha das marxes horizontais e verticais dun elemento.
Cada unha das propiedades establece a separación entre o bordo lateral da caixa e o resto de caixas adxacentes:
| Propiedade | Valores que acepta | Descrición | Exemplos |
|---|
margin-leftmargin-rightmargin-topmargin-bottom
|
|
Establece cada unha das marxes horizontais e verticais dun elemento
Exemplo do comportamento do marxe en CSS.
|
div img {
margin-top: 0.5em;
margin-bottom: 2px;
margin-left: 1em;
margin-right: 5px;
}
|
|
margin
|
|
Establece as marxes nunha soa liña. Pode ter de un a catro valores e significa o seguinte:
- 1 valor: Establece as catro marxes ao mesmo tempo. Exemplo:
margin: 25px;
- 2 valores. Exemplo:
margin: 20px 30px;
- O primeiro valor establece as marxes superior e inferior (20px)
- O segundo as marxes dereito e esquerdo (30px)
- 3 valores. Exemplo:
margin 10px auto 30px;
- O primeiro valor e a marxe superior (10px)
- O segundo son as marxes dereito e esquerdo (auto)
- O terceiro a marxe inferior (30px)
- 4 valores. Exemplo:
margin 10px 20px 3px auto;
- O primeiro valor é a marxe superior (10px)
- O segundo a marxe dereito (20px)
- O terceiro a marxe inferior (3px)
- O cuarto a marxe esquerdo (auto)
|
div img {
margin: 4px 5px;
}
p { margin: 5px; }
|
Recheo
CSS define catro propiedades para controlar cada un dos espazos de recheo horizontais e verticais dun elemento.
Cada unha destas propiedades establece a separación entre o contido e os bordos laterais da caixa do elemento:
| Propiedade | Valores que acepta | Descrición | Exemplos |
|---|
padding-leftpadding-rightpadding-toppadding-bottom
|
|
Establece cada un dos recheos horizontais e verticais dun elemento
Exemplo do comportamento do recheo en CSS.
|
div img {
padding-top: 0.5em;
padding-bottom: 2px;
padding-left: 1em;
padding-right: 5px;
}
|
|
padding
|
|
Establece os recheos nunha soa liña. Pode ter de un a catro valores e significa o seguinte:
- 1 valor: Establece os catro marxes ao mesmo tempo. Exemplo:
padding: 25px;
- 2 valores. Exemplo:
padding: 20px 30px;
- O primeiro valor establece os recheos superior e inferior (20px)
- O segundo os recheos dereito e esquerdo (30px)
- 3 valores. Exemplo:
padding 10px auto 30px;
- O primeiro valor e o recheo superior (10px)
- O segundo son os recheos dereito e esquerdo (auto)
- O terceiro o recheos inferior (30px)
- 4 valores. Exemplo:
padding 10px 20px 3px auto;
- O primeiro valor é o recheo superior (10px)
- O segundo o recheo dereito (20px)
- O terceiro o recheo inferior (3px)
- O cuarto o recheo esquerdo (auto)
|
div img {
padding: 4px 5px;
}
p { padding: 5px; }
|
