Box Model CSS | Kita Ngoding CSS #11 |
Box Model CSS.- Pada artikel ini kita akan sama-sama belajar mengenai Box Model pada CSS, Konsep dari box model, Struktur dari box model, dan lainnya. Jadi tetap ikuti terus catatan admin berikut ya.
BOX MODEL PADA CSS
Untuk diketahuai bahwa setiap element dihalaman
berada di dalam sebuah box(Kotak) dan Kita bisa mengatur ukuran dan posisi
kotak tersebut selain itu kita juga bisa memberikan warna / gambar sebagai
background kotak tersebut lalu menampilkannya sesuai dengan format visual yang
kita berikan.
CSS box model terdiri
dari Margin,
Border, Padding dan Content (seperti: tulisan, gambar, link dan lain
sebagainya). Pada pertemuan sebelumnya kita telah sama tentang itu semua, jadi
bagi yang belum mengikuti bahasan sebelumnya, admin sarankan untuk melihat dan
membacanya terlebih dahulu supaya tidak kebingungan kedepannya.
Baca Juga : Margin Dan Padding Pada CSS
Namun sebelum lanjut, alangkah baiknya bila
kita ulas sedikit tentang Apa itu Margin, Padding, Border, Content.
- Margin : area di sekitar kotak (diluar
border) yang transparan/tidak terlihat
- Padding : area di dalam kotak antara content
dan border yang juga bersifat transparan
- Border : batasan/garis
disekitaran/disekeliling content dan padding
- Content : objek yang berada di dalam
kotak/box, bisa berupa teks, gambar, dan lain sebagainya.
Dalam box model kita hanya bisa mengatur tiga
element diatas yaitu Margin, Padding, dan Border dengan menggunakan property
sebagai berikut :
|
Properti Untuk
Margin |
Properti Untuk
Padding |
Properti Untuk
Border |
|
margin-top |
padding-top |
border-top |
|
margin-right |
padding-right |
border-right |
|
margin-bottom |
padding-bottom |
border-bottom |
|
margin-left |
padding-left |
border-left |
|
margin |
padding |
border |
Baca Juga : Contoh Website Sederhana Menggunakan Box Model CSS
Struktur Box Model Pada CSS
Untuk memahami Struktur Box Model itu sendiri, kalian bisa memperhatikan gambar dibawah ini :
Seperti yang terlihat pada gambar diatas, bahwa
posisi dari 4 element yang dalam box model terlihat tersusun rapi. Dimana,
margin menempati posisi paling luar dan content berada pada posisi terdalam
yang diantaranya dipisahkan oleh border dan padding.
Admin rasa sampai disini kalian sudah pasti
paham tentang box model. Dan untuk lebih jelasnya kita akan mencoba membuat
website dengan box model tersebut.
Artikel Terkait :
Pengertian CSS dan Fungsinya | Kita Ngoding CSS #01 |
Syntax CSS | Kita Ngoding CSS #02 |
Selector Pada CSS | Kita Ngoding CSS #03 |
Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04 |
Membuat Komentar Di CSS | Kita Ngoding CSS #05 |
Code Warna Dalam CSS | Kita Ngoding CSS #06 |
Kode Background CSS | Kita Ngoding CSS #07 |
Cara Membuat Border Di CSS | Kita Ngoding CSS #08 |
Magin Dan Padding Pada CSS | Kita Ngoding CSS #09 |
CSS Height Dan Width | Kita Ngoding CSS #10 |
Box Model CSS | Kita Ngoding CSS #11 |
Reset CSS | Kita Ngoding CSS #12 |
Dimensi Dan Display Pada CSS |Kita Ngoding CSS#13|
Float CSS | Kita Ngoding CSS#14|
Clear CSS |Kita Ngoding CSS#15|
Sampai berjuma pada artikel selanjutnya.
0 Response to "Box Model CSS | Kita Ngoding CSS #11 |"
Posting Komentar