Box model materi kelas XI Semester Genap

 

Box model

·         Setiap elemen di halaman berada di dalam sebuah box

·         Kita bias mengatur ukuran dan posisi kotak tersebut

·         Kita bias memberi warna/gambar sebagai background kotak tersebut

§  Merah adalah marginnya

§  Biru adalah border

§  Biru muda adalah padding

§  Putih adalah contennya

 

 

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 di dalam box dan berupa text

 

 

Properti untuk margin, padding dan border

1.      Margin-top                  1. Padding-top                                    1. Border-top

2.      Margin-right                2. Padding-right                                 2. Border-right

3.      Margin-bottom            3. Padding-bottom                              3. Border-bottom

4.      Margin-left                  4. Padding-left                                    4. Border-left

5.      Margin                         5. Padding                                          5. Border

 

 

Margin

Cara pakai

 

·         Overlapping margin

·         Negative margin

·         Auto

·         shorthand