Curso HTML5 y CSS3 Parte 2

Segunda Entrega del Curso de HTML5 y CSS3

[youtube]http://www.youtube.com/watch?v=oGKhiJSXjVI[/youtube]

Modelo de Caja

Antes de empezar a maquetar nuestro sitio hay algo que debemos entender bien, y es el modelo de caja, nuestro navegador interpreta cada elemento HTML como una caja o un cuadrilátero, es decir, un cuadrado o un rectángulo(puede no ser en todos, pero por ahora lo dejaremos asi).

Bien, antes de empezar a maquetar el sitio, debemos entender bien esto, ya que si no lo entendemos bien nos puede traer problemas al no conseguir el resultado que deseamos si lo hacemos a ‘prueba y error’ como me ha pasado a mi, asi que, no se preocupen, hice mi tarea e investigue lo que era el modelo de caja y decidí agregarlo al curso para que no les valla tan mal como a mi.

El modelo de caja es como se explica en la imagen de abajo:

Modelo de Caja
1. Modelo de Caja

El rectángulo negro es nuestro elemento de HTML, nuetro navegador web lo trabaja como si se tratara de un bloque rectángular. Las cajas no son visibles a simple vista, hay que agregar un borde a los ejementos HTML que tenemos en nuestro documento, en el video de abajo les muestro como hacerlo de una forma sencilla utilizando nuestro navegador. Ahora trataré de explicar en pocas palabras cada componente del modelo de caja.

Componentes del Modelo de Caja

Contenido: Es el contenido que deseamos mostrar ya sea texto, imágen o video.
Padding: Es el espacio existente entre el contenido y los bordes de la caja.
Margin: Es el espacio que separa los diferentes elementos HTML y sus respectivos modelos de caja.

En sí, esto es el modelo de caja, yo en lo particular les recomiendo que en algunos sitios de internet traten de ver los modelos de caja de los elementos que tienen de la misma forma en que se muestra en el video, click derecho -> Inspecionar elemento(Q) para que se vallan familiarizando con el concepto de modelo de caja, si lo creen necesario pueden buscar más información en internet. Recuerden que estoy humano y cometo errores, si me he equivocado en algo por favor haganmelo saber con sus comentarios para corregirlo lo antes posible. Nos vemos hasta la proxima.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

+ 79 = 88