Tutorial 2 - Modelo caja
Buenos dias PWG, ahora tenemos que saber los conceptos (width,height,margin y padding) , eso si , primero habremos tenido que ver el Tutorial 1 CSS:Primeros conceptosEl curso intentará ser progresivo , así que mejor comenzar desde el primero y no saltarse ningún capítulo, ya que tampoco es excesivamente complicado.
Lo primero es saber las definiciones de cada uno de los atributos con los que vamos a trabajar.
-width:Indicará lo largo del elemento <id> o <class>
-height:Indicará la altura del elemento <id> o <class>
-margin:Es la separación entre un elemento y otro
-border:Permite crear varios tipos de bordes en elementos de la página
-padding: Es el relleno, la separación entre un elemento y aquel que lo contiene
Ahora veamos un ejemplo práctico
| Código: |
| <div id="diseño"> Diseño básico </div> <div id="margin"> Margin </div> |
A continuación el código CSS
| Código: |
| #diseño{ width:200px; background-color:blue; } #margin { padding:10px; width:200px; margin:10px; background-color:red; } |
Ahora vayamos a probar la propiedad border.
| Código: |
| <div id="border"> Border </div> |
Código css
| Código: |
| #border{ border: 4px double #000000; width:100px; } |
Ahora después de haber leído esto es el momento de decir que tanto en la propiedad margin,padding y border podemos utilizar los atributos top,bottom,left y right de la manera siguiente
| Código: |
| margin-left:5px |
| Código: |
| padding-top:5px; |
| Código: |
| border-right:5px; |
Y así con cualquier elemento , también podemos poner todo esto en una línia , por ejemplo así:
| Código: |
| margin: 10px 5px 20px 0 |
Esto se leería de la siguiente manera 10 píxeles arriba, 5 a la derecha, 20 abajo y 0 a la izquierda