CSS

Modelo de Cajas – CSS Box Model

Todos los elementos HTML se pueden considerar como cuadros. En CSS, el término "modelo de caja" se usa
cuando se habla de diseño y maquetación.

El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en: márgenes,
bordes, relleno y el contenido real. La siguiente imagen ilustra el modelo de caja:

Fuente: w3School
 Box Model - Partes

Explicación de las diferentes partes:

Content: el contenido del cuadro, donde aparecen el texto y

las imágenes.
Padding: limpia un área alrededor del contenido. El
acolchado es transparente
Border: un borde que rodea el relleno y el contenido.
Margin: borra un área fuera del borde. El margen es
transparente
El modelo de caja nos permite agregar un borde alrededor
de los elementos y definir el espacio entre los elementos.

Fuente: w3School
 Ejemplo

Fuente: w3School
 Ejemplo

Fuente: w3School
 Ejercicio # 3 en clase

 Realiza el mockup
con lo aprendido en
clase, ten en cuenta
que cada opción del
menú debe quedar
funcional al igual que
los link a las redes
sociales…

 Valor 0,2

Fuente: Uniwebsidad, “2.4. Herencia (Introducción a CSS)

 Para tener en cuenta:

 Todos los elementos de mi sitio web son rectángulos.

 Existen elementos de tipo línea y de tipo bloque.
 Los elementos en línea no tienen ancho ni alto, por lo tanto se
debe forzar a convertirlos en elemento en bloque, con la
propiedad display

Fuente: Uniwebsidad, “2.4. Herencia (Introducción a CSS)

 Para tener en cuenta:

Los elementos en línea definidos por HTML

son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kb
d, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
Los elementos de bloque definidos por HTML
son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isind
ex, menu, noframes, noscript, ol, p, pre, table, ul.
Los siguientes elementos también se considera que son de
bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en línea y de bloque según
las circunstancias: button, del, iframe, ins, map, object, script.

Fuente: Uniwebsidad, “2.4. Herencia (Introducción a CSS)

Gracias 
“La tecnología no se evade, se asume como un nuevo reto educativo”… Ky