oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 10: Modelo de caja (margen y relleno)
Margen de un elemento.
Para empezar hay que decir que todo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. Una vez aclarado esto diremos que la propiedad margin es la encargada de establecer las distancias desde cada lado del elemento respecto al elemento colindante, o respecto a los bordes del documento.
Pasemos a ver un ejemplo de como definir los márgenes de un documento (<body>). En la siguiente captura vemos un ejemplo de como queremos que sean los márgenes de nuestras páginas web:
El código CSS necesario para definir estos márgenes sería el siguiente:
body {
margin-top: 150px;
margin-right: 60px;
margin-bottom: 50px;
margin-left: 100px;
}
Como ves margin-top establece el márgen superior, margin-right el márgen derecho, margin-bottom el márgen inferior y margin-left establecerá el margen izquierdo.
Relleno de un elemento.
Para poder realizar esta acción utilizaremos la propiedad padding (relleno). Esta propiedad es la encargada de definir la distancia interior entre el borde y el contenido del elemento.
En el siguiente ejemplo veremos como todos los títulos tienen diferentes colores de fondo. El código CSS sería el siguiente:
h1 {
background: #ff0000;
}
h2 {
background: #00ff00;
}
Como ves el encabezado h1 aparece con el color rojo de fondo y el encabezado h2 con el color verde de fondo:
Pero si introducimos la propiedad padding variamos la cantidad de relleno que habrá alrededor del texto.
Veamos un ejemplo de código CSS:
h1 {
background: #ff0000;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 90px;
}
h2 {
background: #00ff00;
padding-left: 110px;
}
Al haber introducido la propiedad "padding" con diferentes valores para cada encabezado ahora lo visualizaríamos así en nuestro navegador:
Venga!! pasemos a la siguiente lección donde te enseñaré a como poner bordes con diferentes formas y colores a tus elementos de página.
Quiero aprender más!!!
- Avanzar a Lección 11: Modelo de caja (bordes)
- Retroceder a Lección 9: Modelo de caja
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®