Piso
Aprtamentos
Turismo gallego en las rias bajas y Pontevedra

Trucos hojas de estilo

Padding y Margin CSS

Los valores se definen principalmente
en P, EM o tanto por ciento ( % )
p { margin: 12px; }
h1 { margin: 1em; }
body { margin: 10%; }
p { padding: 12px; }
h1 { padding: 2em; }
body { padding: 50%; }

PADDING
especifica el espacio que hay
entre el borde interior de una
celda de una tabla o de una
caja CSS y su contenido.
 Ejemplos:
PADDING-TOP: 25px; /*espacio superior*/
 PADDING-RIGHT: 50em; /*espacio derecho*/
 PADDING-LEFT: 50%; /*espacio izquierdo*/
 PADDING-BOTTOM: 25px; /*espacio inferior*/

Se pueden abreviar en uno solo:
PADDING: 0 0 0 0.2em;
PADDING: 0.2em 0 0 0;
PADDING: 5px 2pc 1in 2em;
PADDING: 2em 1in 2pc 5px;

Algunos ejemplos:
PADDING: 0 0.15em 0 0;
PADDING: 0 0.15em -0.5em

Ejemplo de Padding dentro de una caja:
Padding-left:
Margen
interior
izquierdo
Padding-top:
Magen interior
superior

Texto de la
caja o tabla

Padding-bottom:
Margen interior
inferior
Padding-right:
Margen interior
derecho
Ejemplo con Padding
<STYLE TYPE="text/css">
H2 {padding: 1em; width:300; background:red}
</STYLE>
<h2>www.paraverano.es</h2>
 Resultado:

www.paraverano.es

MARGIN
Define el espacio exterior
de una tabla, caja CSS, etc
MARGIN-TOP: 25px; Margen superior.
 MARGIN-LEFT: 3em; Margen izquierdo.
 MARGIN-RIGHT: 15px; Margen derecho.
 MARGIN-BOTTOM: 0 25px; Margen inferior.
 MARGIN-RIGHT: AUTO;
Con AUTO el navegador calculará
automáticamente los márgenes
que le hay que dar al objeto

Se pueden abreviar en uno solo:
MARGIN: 0 0 0 0.2em;
MARGIN: 0.2em 0 0 0;
MARGIN: 5px 2pc 1in 2em;
MARGIN: 2em 1in 2pc 5px;

Un par de ejemplos:
MARGIN: 0 0.15em 0 0;
MARGIN: 0 0.15em -0.5em

Un ejemplo en una pagina:
<HTML> <HEAD> <TITLE> Ejemplo </TITLE>
<STYLE>
P.ejemplo
{
width: 200px; /*longitud de la caja*/
text-align: center; /*centra el texto*/
border: 1px ridge navy; /*bordes de la caja*/
margin-left: 10px;
margin-right:auto;
margin-top: 25px;
margin-botom: 10px;
background: beige; /*fondo amarillo claro*/
}
</STYLE></HEAD><BODY>
<P class="ejemplo">
AKI VA EL TEXTO
</P>
</BODY></HTML>

Ejemplo de Margin que separa
una caja del borde exterior
Margin-top:
Margen exterior superior

Margin-left:    
Margen exterior   
izquierdo   

Caja o
celda CSS

        Margin-right:
       Margen exterior
      derecho

Margin-bottom
Margen exterior inferior


<STYLE TYPE="text/css">
BODY {
margin-top: 1em;
margin-left: 2em;
margin-right: 3em;
margin-bottom: 4em;
}
</STYLE>

Es igual a este codigo abreviado
<STYLE>
BODY {
margin: 1em 2em 3em 4em;
}
</STYLE>


Margin y Paddin con listas
<STYLE TYPE="text/css">
LI {
color: yellow;
background: navy;
margin-right: 25px;
}
</STYLE>
<BODY>
<UL>
<LI> 1º elemento de la lista
<LI> 2º elemento de la lista
</UL>
Resultado
  • 1º elemento de la lista
  • 2º elemento de la lista
Al curso de CSS
Al curso de ingles
Programas y juegos
Programas de idiomas
Atico y piso para verano
Verbos