CSS Layouting #3 : Box Model
47 likes22,370 views
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
Ad
More Related Content
What's hot (20)
Similar to CSS Layouting #3 : Box Model (14)
Ad
Recently uploaded (20)
![[1] Modul Profesional Akidah Akhlak Topik 3 (2).pdf](https://cdn.slidesharecdn.com/ss_thumbnails/1modulprofesionalakidahakhlaktopik32-250505004039-f623af27-thumbnail.jpg?width=560&fit=bounds)
Ad
CSS Layouting #3 : Box Model
- 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. “
- 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
- 12. HTML CSS
- 14. CSS auto 100px auto 100pxauto akan membuat elemen berada di tengah
- 20. border box model
- 22. border: width style color;
- 23. border: 3px solid black; width color style
- 24. style
- 26. total width dan height element width + padding + border height + padding + border atau
- 27. box-sizing solusi agar padding dan border tidak mempengaruhi width