Modelo de divs en CSS

Bueno todos los inicios son dificiles, y cambiar de tablas a capas (div’s) algunos maquetadores se topan con problemas. y lo clasico es que nuestros elementos no esten donde deberian estar posicionados.

Y existen grandes factores, como widht (que es el mas comun), margin, padding, border. que al implementar a ciegas suelen dar errores como desbordamientos o drasticos colapsos en ie u otros (ok exagere).

Lo mas importante es entender que diantres son las propiedades en un div… y su correcto uso… y creo que en el siguiente grafico esta claro.

Dimensiones de un div (importante)
las medidas son muy importantes para tener nuetros elementos bien posicionados… y como vemos en el ejemplo anterior… nuestro div tiene un ancho de 500px y luego nuestro margen interior o bien “relleno” (padding) que tiene 10px hace que nuestro div se le sumen 20px (10px por lado del div) mas de ancho y luego un borde decorativo de 1px por lado que igual se suman al tamaño de nuestro div, y por ultimo tenemos nuestro margen “exterior” que sirve para eso “separar” y tiene otros 10px por lado y se le suman de nuevo a nuestro div contenedor, que ahora ya no mide “width:500px” ahora mide “width:542px” y claro lo mismo ocurre con la altura…

Igualar entre diferentes browsers con un Reset CSS

Reset CSS
Bueno… por defecto todos los navegadores tienen su propio margin y padding y aplicando este conocido reset universal

*{margin:0;padding:0;}

este reset aplica para todos los elementos en nuestro documento le da margin y padding 0 a todo y nos ayuda a tener mas compatibilidad entre navegadores, igual al estar implementando es importante no darle un ancho fijo a los div “hijos” y solo establecerlo a los elementos padre que esten flotados, ya que si limitamos sus anchos se recomienda no aplicar un padding a estos ya que es un poco tedio porque podemos tener <p> <span> <img>, etc.. y tendremos que darle al padding a estos encambio es mejor darle el padding al div padre para que no de problemas con otros navegadores. bueno chao y suerte en sus futuras maquetaciones.