Box model adalah konsep yang paling utama dari CSS Layouting, jika kalian paham mengenai ini maka akan mudah untuk kalian dalam melakukan pengaturan tata letak elemen pada website kalian. ada 4 komponen dalam box model : 1. margin 2. padding 3. border 4. konten

1. box model
CSS

2. http://css-tricks.com/the-css-box-model/
• setiap elemen di halaman berada di dalam sebuah box
(kotak)
• kita bisa mengatur ukuran dan posisi kotak tersebut
• kita bisa memberi warna / gambar sebagai background
kotak tersebut
“

3. Google Chrome : * { border: 1px solid red }

4. Mozilla Firefox : 3D View

5. http://www.w3.org/TR/CSS2/box.html
CSS box model mendefinisikan ‘kotak’ yang dihasilkan
oleh sebuah elemen, lalu menampilkannya sesuai
dengan format visualnya.
“

6. http://www.w3schools.com/css/css_boxmodel.asp
CSS box model terdiri dari margin, border,
padding dan content.
“

7. http://www.w3schools.com/css/css_boxmodel.asp

8. CSS Box Model
margin
area transparan di sekitar kotak (di luar border)
padding
area transparan di dalam kotak (antara content dan border)
border
batas disekeliling content dan padding
content
konten sebenarnya di dalam box, bisa berupa teks atau gambar

9. properti untuk margin, padding & border
margin-top
margin-right
margin-bottom
margin-left
margin
padding-top
padding-right
padding-bottom
padding-left
padding
border-top
border-right
border-bottom
border-left
border

10. margin

11. margin
px
%
auto
(boleh negatif)

12. HTML
CSS

13. CSS
50px
50px
50px
50px

14. CSS
auto
100px
auto
100pxauto akan membuat elemen berada di tengah

15. CSS
auto
50px
auto
25px

16. CSS
20px
50px
40px
30px

17. padding
box model

18. padding
px
%
tidak boleh negatif

19. CSS 50px
20px
30px
40px

20. border
box model

21. border
width
style
color

22. border: width style color;

23. border: 3px solid black;
width
color
style

24. style

25. box sizing
box model

26. total width dan height element
width + padding + border
height + padding + border
atau

27. box-sizing
solusi agar padding dan border tidak mempengaruhi width

28. mange takk.
sandhikagalih@unpas.ac.id