Marxes en CSS

Cada etiqueta HTML que xera un bloque no documento forma unha caixa. O navegador visualizará estes elementos en bloques rectangulares, segundo a orden e mostrando unhas distancias entre eles predeterminadas polas regras de estilos.

Podemos especificar dous tipos de marxes:

marxes exteriores - Distancia dende o contenedor ou pai ata o borde bloque HTML.
marxes interiores - Distancia dende o borde ata o punto onde comenza o contido deste.

_______________________________________
|                                       |
|           marxe exterior (sen cor)    |
|   _________________________________   |
|  |                                 |  |
|  |        borde                    |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     marxe interior        |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  contido            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

         |  ancho do elemento  |
|               ancho de caixa          |

Marxes exteriores- margin

É o espazo entre o contenedor ou pai ata o borde.

Podemos modificar os marxes exteriores dun bloque HTML indicando como valor da propiedade a medida do marxe para as propiedades:

margin-top – marxe superior
margin-bottom - marxe inferior
margin-left – marxe esquerdo
margin-right – marxe dereito
margin – Especificando separando por comas margin-top, margin-right, margin-bottom, margin-left. Se só se especifica un valor o navegador usarao como valor por defecto para os catro marxes.
Se un elemento HTML ten un margin-botton e o seguinte un margin-top non se suman ambas marxes, senón que se toma a maior delas.

Tódalas propiedades anteriores aceptan o valor auto. Nese caso tomarase a marxe por defecto. Se o elemento ten definido un ancho e especifícase margin-left:auto e margin-right:auto o elemento centrarse horizontalmente no contenedor. Se o elemento ten definido un alto e especifícase margin-top:auto e margin:bottom:auto o elemento centrase verticalmente no contenedor. Só se garante o centrado vertical e horizontal do valor auto se o doctype é <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .

Exemplo de regras de estilo:

.bloqueCentrado {
background-color: #A4CEFF;
margin-top: 15px;
width:28%;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}

Exemplo de código:

<p class="bloqueCentrado">Bloque con marxe exterior centrado no contenedor</p>

Visualización:

Bloque con marxe exterior centrado no contenedor

Marxes interiores - padding

É o espazo entre o contido dun bloque ata o borde. Dicese que é un espazo interno porque o espazo está dentro do bloque HTML.

Podemos modificar as marxes interiores dun bloque HTML mediante as propiedades:

padding-top – Distancia dende o borde superior do bloque ata o punto superior do contido.
padding-bottom – Distancia dende o borde inferior do bloque ata o punto inferior do contido.
padding-left - Distancia dende o borde esquerdo do bloque ata o punto esquerdo do contido.
padding-right - Distancia dende o borde dereito do bloque ata o punto dereito do contido.
padding - Especificando separando por comas padding-top, padding-right, padding-bottom, padding-left. Se só se especifica un valor o navegador usarao como valor por defecto para os catro marxes interiores.
Se un elemento HTML ten un padding-botton e o seguinte un padding-top non se suman ambas marxes interiores, senón que se toma a maior delas.

Tódalas propiedades anteriores aceptan como valor unidades de medida.

Exemplo de regras de estilo:

.bloqueCentradoPadding {
background-color: #A4CEFF;
margin-top: 15px;
width:28%;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
padding:20px;
}

Exemplo de código:

<p class="bloqueCentradoPadding">Bloque con marxe exterior centrado no contenedor e marxe interior</p>

Visualización:

Bloque con marxe exterior centrado no contenedor e marxe interior

Se o texto ten indentación negativa, pode ser necesario aumentar a marxe esquerda para ver o principio do parágrafo.

Exemplo de regras de estilo:

.bloque {
   background-color: #A4CEFF;
   margin:           10px,10px,10px,40px;
   padding:          0px;}
.caradentro {text-indent: 40px;}
.carafora    {text-indent: -40px;}

Exemplo de código:

<div class="bloque">
<p class="caradentro">Este parágrafo ten aplicada a clase caradentro, por tanto, terá unha indentación de 40 puntos na primeira liña do paragrafo, é dicir, verase como unha sangría típica de parágrafo.</p>
<p class="carafora">Este parágrafo ten aplicada a clase carafora, por tanto, terá unha indentación de -40 puntos na primeira liña do paragrafo, é dicir, verase como unha sangría colgante. Observe que parte do texto colgante está situado na marxe esquerda definida como de 40px.</p>
</div>

Visualización:

Este parágrafo ten aplicada a clase caradentro, por tanto, terá unha indentación de 40 puntos na primeira liña do paragrafo, é dicir, verase como unha sangría típica de parágrafo.

Este parágrafo ten aplicada a clase carafora, por tanto, terá unha indentación de -40 puntos na primeira liña do paragrafo, é dicir, verase como unha sangría colgante. Observe que parte do texto colgante está situado na marxe esquerda definida como de 40px.

Seguinte