1. CSS - Modelo de Caixa
Willian Massami Watanabe
wwatanabe@utfpr.edu.br
1

2. Sumário
• Modelo de caixa
• height e width
• border
• padding
• margin
2

3. 3

4. height
4

5. width
5

6. Modelo de caixa
• height e width:
• definidos em px, em, ou %
• display: block apenas
6

7. border
7

8. Modelo de caixa
• border
• border-left
• border-right
• border-top
• border-bottom
border: [width] [style] [color];
8

9. margin
9

10. Modelo de caixa
• margin (margin-left, margin-right, margin-top, margin-bottom)
• definida em px, em e %
margin: [top] [left] [bottom] [right];
margin: [top] [left-right] [bottom];
margin: [top-bottom] [left-right];
margin: [top-bottom-left-right];
10

11. padding
11

12. Modelo de caixa
• padding (padding-left, padding-right, padding-top, padding-
bottom)
• definida em px, em e %
padding: [top] [left] [bottom] [right];
padding: [top] [left-right] [bottom];
padding: [top-bottom] [left-right];
padding: [top-bottom-left-right];
12

13. margin
13

14. Modelo de caixa
• overflow (overflow-x e overflow-y)
• visible
• hidden
• scroll
• auto
• inherit
14

15. Exercício
• Faça uma estrutura HTML, utilizando atributos de padding,
margin, height, width, border; que seja apresentada da seguinte
forma:
15