Curso de Estándares Web - Día #7 * Explicación del Box Model * Sintaxis * Margin, Padding, Border, Width, Height * IE5 Bug

1. CSS
The Box Model
Harold Maduro

2. xHTML
Cada elemento HTML, genera una caja
rectangular llamada “element box”.

3. xHTML 1.0
Tipos de elementos o “element box”
• Block Elements
• Inline Elements

4. xHTML 1.0
Block Element
• Como por ejemplo: P, H1, H2, DIV
• Genera nuevas líneas antes y después de su recuadro en el
“normal flow” del documento
• Se acomodan verticalmente, uno debajo del anterior
• Un block element puede tener como hijos y descendientes
a otros block elements y a inline elements

5. xHTML 1.0
Inline element
• Como STRONG, EM, SPAN
• No generan nuevas líneas antes y después de su contenido
• Son descendientes de un block element
• Un inline element sólo puede tener como hijos y
descendientes a otros inline elements
• No es posible que un inline element tenga como hijo o
descendiente a un block element

6. Block Element
Cada elemento en el documento, es considerado
como una caja rectangular (de un ancho y alto
específico) que guarda un contenido (content
area); el cual está rodeado de padding, borders y
margins.

7. Block Element
Anatomía
• Contenido (el texto)
• Margins
• Paddings
• Border
• Ancho (width)
• Alto (height)

8. Block Element
Los margins siempre son transparentes.
Los bordes pueden ser de distintos colores,
formas y tamaños.
El background del elemento ocupa toda la parte
posterior del contenido y del padding, hasta topar
con el border.

9. <p> Content Area </p>

11. Interactive CSS Box Model Demo
http://redmelon.net/tstme/box_model/
Douglas Livingstone

12. Width
El ancho del elemento
p { width: auto; }
p { width: 500px; }
p { width: 50%; }
p { width: 20em; }
p { width inherit; }

13. Height
El alto del elemento
p { height: auto; }
p { height: 500px; }
p { height: 20em; }
p { height inherit; }

14. Width & Height
Son ignorados si se le aplican a un inline element.

15. Margins
Los margins están afuera del border.

16. Margins
Es el espacio vacío entre dos elementos.

17. Margins
Margin

18. Margins
Se puede especificar cada lado por separado
p{
margin-top: 20px;
margin-left: 25px;
margin-right: 66px;
margin-bottom: 100px;
}

19. Margins
Se puede utilizar la sintaxis resumida
p { margin: 10px 20px 30px 40px; }
Clockwise: arriba, derecha, abajo, izquierda

20. Margins
Se puede utilizar la sintaxis resumida
p { margin: 10px 20px 30px 40px; }
Clockwise: top, right, bottom, left

21. Margins
Se puede utilizar la sintaxis resumida
TRouBLe
Clockwise: top, right, bottom, left

22. Margins
Se pueden mezclar diferentes unidades de medida
p { margin: 10px 20in 30% 40em; }

23. Margins
Se puede especificar que todos los lados tengan el mismo margin
p { margin: 20px; }

24. Margins
Margin Collapse
Los margins de arriba y abajo tienen una
propiedad diferente a los laterales; llamada
“margin collapse”.
Cuando hay dos elementos posicionados uno
arriba del otro; el espacio entre ellos es el tamaño
del margin más grande; no el tamaño de los dos
márgenes sumados.

25. Margins
Margin Collapse
Si le especifican a los P un margin top de 10px y
un margin bottom de 10px; el espacio entre dos
P será de 10px, no de 20px.

26. Margins
Margin Collapse
Si le especifican a los DIV un margin bottom de
20px y otro con un margin top de 15px; el
espacio entre dos DIV será de 20px, no de 35px,
ni 25px.

27. Margins
Margin Collapse
margin-bottom: 20px
margin-top: 20px margin-top: 15px
margin-top: 15px

28. Borders
Inserta un (¡gasp!) borde alrededor del objeto.

29. Borders
Border
Content Area

30. Borders
Son una o dos líneas que rodean el contenido del
elemento.

31. Borders
Bordes que rodean a todo el elemento
p{
border-style: dashed;
border-color: #f00;
border-width: 10px;
}

32. Borders Styles
Son distintos tipos o estilos de borde
p{
border-style: dashed;
border-color: #f00;
border-width: 10px;
}

33. Borders Styles
Son distintos tipos o estilos de borde
Valores Disponibles
none
dotted
dashed
solid
double
groove
ridge
inset
outset

34. Borders Color
Se especifica el color del borde.
p{
border-style: dashed;
border-color: #f00;
border-width: 10px;
}

35. Borders Color
Se puede especificar un border color, pero el
borde hereda el color del elemento, en el caso de
no ser especificado.
p { border-style: dashed; color: red; }
p { border-style: dashed; border-color: #f00; }

36. Borders Width
El ancho del borde
p{
border-style: dashed;
border-color: #f00;
border-width: 10px;
}

37. Borders Width
El ancho del borde
p { border-width: thick; }
p { border-width: 2px;}

38. Borders Width
Valores
thin
medium
thick
( tamaño en unidad de medida )
inherit

39. Borders
p{
border-width: 2px;
border-color: #f00;
border-style: solid;
}

40. Borders
Se puede detallar el lado que queremos modificar
p{
border-left-with: 1px;
border-left-style: dotted;
border-left-color: #333;
}

41. Borders
p{
border-left-with: 1px;
Se puede detallar border-left-style: dotted;
bordes diferentes border-left-color: #333;
para cada lado border-top-with: 3px;
border-top-style: solid;
border-top-color: #f00;
border-bottom-with: 10px;
border-bottom-style: double;
border-bottom-color: yellow;
border-right-with: 5px;
border-right-style: groove;
border-right-color: #000;
}

42. Borders
Versión Resumida
(Short hand version)
p{
border-left: 1px solid #00f;
}

43. Borders
Versión Resumida
Se pueden especificar los cuatro lados por separado
p{
border-top: 1px solid #000;
border-right: 2px groove #fff;
border-bottom: 3px dashed #333;
border-left: 4px solid #00f;
}

44. Borders
Versión resumida igual para todos los lados
p { border: 1px solid #00f; }

45. Padding
Es el espacio entre el contenido y el borde
Comparte el mismo color o imagen de fondo
(background) que se le aplica al contenido del
elemento.

46. Padding
Border
Padding
Content Area

47. Padding
Se puede especificar cada lado por separado
p{
padding-top: 20px;
padding-left: 25px;
padding-right: 66px;
padding-bottom: 100px;
}

48. Padding
Se puede utilizar la sintaxis resumida
p { padding: 10px 20px 30px 40px; }
Clockwise: arriba, derecha, abajo, izquierda

49. Padding
Se puede especificar que todos los lados tengan el mismo padding
p { padding: 20px; }

50. El Box Model Completo

51. Bugs

52. Internet Explorer 5.0
Internet Explorer 5.0 interpreta incorrectamente el box
model.
Para IE 5, el width incluye el tamaño total del contenido
(width), paddings y borders. Resultado: cajas más chicas
en IE 5.
IE 5 también permitía aplicarle width y height a
elementos inline.

53. Internet Explorer 5.0
Para solucionarlo, podemos utilizar:
* El box model hack
* Especificar un set de stylesheets diferente para IE 5
con el conditional
* Podemos dejar de especificar paddings y borders para
elementos que tienen declarado un width específico.

54. Box Model Hack
Para IE 5
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Tantek Çelik

55. Bibliografía
CSS: The Definitive Guide
Eric Meyer
Amazon: http://tinyurl.com/5hs7jf

56. W3C Spec
CSS 2 Box Model
http://www.w3.org/TR/CSS21/box.html
W3C