CSS Box Model

Pendahuluan

Desain tampilan web adalah tujuan akhir dari HTML dan CSS . Untuk mencapai hal ini,
pertama-tama kita perlu memahami bagaimana elemen pada halaman web ditata.
Saat menata dokumen, browser akan menata setiap elemen sebagai kotak persegi
panjang sesuai dengan box model dasar CSS. Browser menggunakan box model
untuk menentukan ukuran elemen, tampilannya, dan di mana posisinya pada
halaman web. Karakteristik elemen-elemen ini, seperti warna, latar belakang, ukuran
dan gaya border, dan sebagainya, semuanya ditentukan oleh properti CSS.

Apakah CSS Box Model itu

Box model CSS mendeskripsikan semua elemen HTML halaman web sebagai kotak
persegi panjang. Seperti terlihat pada grafik di bawah ini, baik itu logo, isi bilah
navigasi atau tombol, semuanya berbentuk kotak.

Box model dasar CSS terdiri dari content area, teks/tulisan, gambar, atau elemen
HTML lainnya ditampilkan. Ini secara opsional dikelilingi oleh padding ( spasi di dalam
border), border ( membungkus area konten dan padding ), dan margin (spasi di luar
batas elemen) , pada satu atau lebih sisi. Dalam box model standar, jika Anda
memberikan atribut width dan height, ini menentukan lebar dan tinggi area konten
elemen. Padding dan pembatas apa pun kemudian ditambahkan ke lebar dan tinggi
tersebut untuk mendapatkan ukuran total kotak.

Takeaway:
 Dalam box model CSS, setiap elemen direpresentasikan sebagai kotak persegi
panjang.

Diagram Model Box Model

Diagram berikut mengilustrasikan box model CSS

Halaman 1
Tata letak halaman web secara keseluruhan adalah susunan elemen HTML yang
direpresentasikan sebagai kotak. Di sini, area konten adalah lapisan paling dalam dari
model kotak yang berisi konten utama elemen, seperti teks atau gambar. Lapisan
berikutnya adalah area padding, yang menciptakan ruang ekstra di sekitar area
konten dan di dalam batas elemen. Area perbatasan merupakan lapisan ketiga yang
berfungsi sebagai batas antara padding dan margin kotak. Itu membungkus area
konten dan padding dan dapat ditata dengan banyak cara. Lapisan terluar
adalah margin , yang menciptakan ruang ekstra di luar elemen, umumnya digunakan
untuk memisahkan elemen dari elemen lain di halaman web.

Apa Tujuan Box Model CSS?

Tujuan dari dibuatnya Box Model CSS adalah untuk mendefinisikan semua elemen
pada halaman web sebagai sebuah kotak. Browser menggunakan model kotak CSS
untuk menentukan bagaimana suatu elemen akan muncul dan bagaimana posisinya
pada halaman web. Ini berfungsi sebagai perangkat untuk memposisikan elemen,
kontennya, dan elemen di sekitarnya. Singkatnya, Model Kotak CSS adalah panduan
tata letak untuk elemen di halaman web.

Mengapa Box Model CSS Penting?

Jika Anda berencana membuat tata letak laman web, Anda akan melihatnya
bergantung sepenuhnya pada ukuran dan posisi elemen HTML. Browser
menggunakan Model Kotak CSS untuk menentukan bagaimana elemen HTML
ditampilkan di halaman web. Jika Anda tidak memiliki pemahaman dasar tentang
model kotak, Anda akan membuat tata letak yang berfungsi dengan baik di browser

Halaman 2
tertentu tetapi merusak browser lain. Itu sebabnya penting untuk memahami
bagaimana margin, border, padding , dan konten bekerja sama untuk membuat tata
letak halaman.

Properti Box Model CSS

Ini adalah properti berikut dalam box model CSS.

 Content Area berisi elemen yang sebenarnya , seperti teks, gambar, atau video. Ini
adalah area di mana konten ditampilkan di halaman web. Dimensinya dapat
dimodifikasi menggunakan properti seperti lebar dan tinggi .
 Padding Area padding adalah ruang di sekitar area konten dan di dalam batas
elemen. Ini menciptakan ruang ekstra di dalam batas elemen dan menggunakan
latar belakang yang sama dengan elemen itu sendiri. Dimensi padding ditentukan
oleh properti padding-top , padding-right , padding-bottom , padding-left , dan
singkatan dari padding .
 Border Area border adalah ruang di sekitar area padding dan di dalam margin. Ini
mencakup batas elemen dan membungkus konten serta padding apa pun. Ukuran
dan gayanya dapat dikontrol menggunakan batas dan properti terkait. Misalnya,
dapat diatur ke titik, garis putus-putus, padat, ganda, tidak ada, atau tersembunyi.
Itu juga bisa memiliki sudut membulat menggunakan properti border-radius .
 Margin Area margin adalah ruang transparan di luar batas elemen dan tidak
memiliki warna latar belakang apa pun. Margin membungkus konten, padding,
dan border dan sebagian besar digunakan untuk memisahkan elemen dari elemen
HTML lainnya di halaman web. Ukuran area margin ditentukan menggunakan
properti margin-top, margin-right, margin-bottom, margin-left, dan shorthand
margin.

Halaman 3
Padding Vs Margin
Perbedaan utama antara padding dan margin tercantum di bawah ini.

Padding Margin
Padding adalah ruang dalam suatu Margin adalah ruang terluar suatu
elemen yaitu ruang di dalam batas elemen yaitu ruang di luar batas elemen.
elemen.
Penataan suatu elemen, seperti warna Penataan gaya suatu elemen, misalnya
latar belakang, memengaruhi padding. warna latar belakang, tidak
memengaruhi margin.
Tidak dapat menggunakan nilai negatif Dapat menggunakan nilai negatif

Takeaway
 Padding memberikan ruang di dalam elemen, sedangkan margin menyediakan
ruang di luar elemen.
 Properti margin mengizinkan nilai negatif .

Cara Menggunakan Properti Box Model CSS

Contoh berikut mengilustrasikan penggunaan properti box model CSS:

Praktik 1. HTML
box-model.html

Halaman 4
model-box.html

Halaman 5
CSS Padding

Pendahuluan

Properti padding CSS menyediakan ruang antara batas elemen dan kontennya.
Berbeda dengan margin CSS yang dipengaruhi oleh warna latar belakang elemen
yang paddingnya disetel, yaitu jika Anda menyetel warna latar belakang suatu
elemen, warna tersebut akan terlihat melalui area padding. Margin menciptakan
ruang ekstra di luar elemen, sedangkan padding menciptakan ruang ekstra di dalam
elemen.

Apa itu Padding di CSS?

Properti Padding di CSS mengontrol jumlah ruang di dalam elemen HTML antara
konten dan batasnya. Anda tahu tentang margin yang menambahkan spasi di luar
batas elemen, tetapi untuk padding, spasi ditambahkan di dalam batas elemen. Anda
dapat mengubah properti padding atas, kanan, bawah, dan kiri secara terpisah, dan
Anda juga dapat mengubah semua properti padding sekaligus menggunakan
properti steno yang akan Anda pelajari nanti di artikel ini.
Bagian berwarna hijau pada gambar di bawah mewakili area padding di dalam wadah
elemen, sedangkan area berwarna coklat, yaitu area margin, berada di luar wadah
elemen. Perbatasan memisahkan area margin dan area padding.

Berikut adalah gambaran dari padding.

Sintaksis

padding: size in px or percentage or inherit;

Halaman 6
Properti padding dapat ditentukan menggunakan nilai berikut:
 length - menentukan padding dalam ukuran rem, em, px, dll.
 % - menentukan padding dalam ukuran persentase lebar elemen yang memuatnya.
 inherit - menentukan padding yang harus diwarisi dari elemen induk.

Contoh dua buah elemen dengan padding dan tanpa padding

CSS Padding Properties

Contoh penggunaan property padding

Pada gambar di atas, padding (bagian hijau) di keempat arah berbeda karena disetel
diberikan padding yang berbeda.

Halaman 7
CSS Padding Shorthand Property

 Deklarasi padding Shorthand Property untuk mendeklarasikan padding ke

keempat arah jika padding di keempat arah sama sehingga tidak perlu
menulis padding-right , padding-left , padding-top , padding-bottom satu per
satu.

 Jika properti padding memiliki dua nilai, maka nilai pertama diterapkan
ke padding-top , padding-bottom elemen, dan nilai kedua diterapkan ke padding-
left , padding-right .

 Jika tiga nilai diberikan ke properti padding , maka nilai pertama diterapkan
ke padding-top , nilai kedua diterapkan ke padding-right dan padding-left , dan
nilai ketiga diterapkan ke padding-bottom .

Halaman 8
 Jika empat nilai diberikan ke properti padding , nilai pertama diterapkan
ke padding-top , nilai kedua ke padding-right , nilai ketiga ke padding-bottom , dan
nilai keempat diterapkan ke padding-left .

CSS Padding Inherit

Untuk mewarisi padding suatu elemen dari elemen induknya, dapat

menggunakan padding:inherit . Ini akan memungkinkan untuk menggunakan
padding yang sama seperti yang diterapkan pada elemen induk, yaitu, dan itu akan
mewarisi padding dari elemen induk. Mari kita ambil contoh untuk memahami hal ini
dengan lebih baik.

Halaman 9
Dari gambar diatas dua buah elemen mempunyai padding yang sama karena antara
induk dan anaknya menggunakan padding yang sama dengan perintah
padding:inherit.

Praktik 2 (padding)

padding.html

Halaman 10
paddingproperty.html

paddingshortand.html

Halaman 11
paddinginherit.html

CSS Margin

Pendahuluan

Margin dalam CSS mengacu pada spasi yang ada di sekitar elemen HTML. Nilai margin
adalah ketebalan ruang kosong di sekitar elemen HTML. Margin bertindak sebagai
garis dasar tempat browser menghitung posisi elemen yang berdekatan di halaman
web. Ini berguna dalam mengatur elemen HTML kita dengan rapi dengan
menambahkan beberapa ruang di sekelilingnya.

Apa itu Margin di CSS?

Sebagai contoh yang relevan, bayangkan margin vertikal kiri yang kita gambar di buku
catatan. Ini menyisakan ruang kosong di sebelah kiri dan menandai titik awal untuk
setiap kalimat di halaman.

Margin adalah properti CSS yang mendefinisikan ruang kosong di sekitar elemen
HTML . Margin memastikan bahwa wilayah tertentu di sekitar suatu elemen tetap
tidak ditempati oleh elemen tetangganya. Misalnya, pada gambar di bawah, kita
mengamati bahwa elemen memiliki margin 20 piksel di keempat

Halaman 12
Sintaksis
Margin di CSS ditetapkan menggunakan nama properti margin dan nilai margin.
Properti margin dapat berupa salah satu dari berikut ini dan sesuai dengan arah
elemen HTML yang menerapkan nilai margin.
 margin-top
 margin-right
 margin-bottom
 margin-left

contoh , margin-top : value

Nilai margin CSS dapat berupa:

 margin-top nilai tetap : {value} ( nilai dapat diberikan sebagai px , pt , em , rem ,

dll.)
 persentase margin atas dimensi komponen induk : {percentage}
 atau kata kunci margin- top:{keyword} ( kata kunci bisa auto , Inherit , Initial , Rev
ert , Unset )

Nilai margin default adalah auto . Hal ini menyerahkan kepada browser untuk
menghitung nilai margin secara otomatis .

CSS Margin Properties

Ada empat properti margin, satu untuk setiap sisi kotak elemen HTML.
 margin-top: menambahkan ruang margin di atas elemen.
 margin-right: menambahkan ruang margin di sebelah kanan elemen.
 margin-bottom: menambahkan ruang margin di bagian bawah elemen.
 margin-left: menambahkan ruang margin di sebelah kiri elemen.

Halaman 13
Misalnya,

Pada contoh ini, kita mengatur margin sebesar 20px pada sisi atas dan kiri serta
margin sebesar 40px pada sisi kanan dan bawah elemen boxBlue.

CSS Margin Shorthand Property

CSS Margin Shorthand Property adalah cara pintas penetapan margin yang
memungkinkan kita menetapkan beberapa properti margin pada sebuah elemen
dengan satu deklarasi. Ini berguna ketika nilai margin yang sama perlu ditetapkan
pada sisi tertentu dari elemen. Ini singkat, jelas, dan menghemat beberapa baris kode
tambahan.

Daripada menentukan nilai margin untuk masing-masing sisi secara terpisah, kita
dapat menggunakan notasi margin CSS yang berbeda untuk menghemat usaha
ekstra.

Halaman 14
Halaman 15
Margin Negatif dalam CSS

Margin negatif dalam CSS mengacu pada penggunaan nilai negatif sebagai margin.
Ini digunakan untuk mengurangi jarak antar elemen dan mendekatkannya . Elemen
HTML yang tumpang tindih akan terjadi jika nilai margin negatif melebihi jarak antar
elemen yang ada.
 Jika kita menggunakan nilai negatif dengan properti margin-top atau margin-
left , hal ini akan mendekatkan elemen target kita ke tetangga atas atau kirinya.
 Jika kita menggunakan nilai negatif dengan properti margin-
bottom atau margin-right , hal ini akan menarik elemen tetangga lebih dekat ke
elemen target kita.

Halaman 16
Misalnya, .boxRed:{ margin-top: -10px; }

Di sini saat merender boxRed, browser menghitung garis dasar dari mana memulai
rendering boxRed dan menggesernya sebesar 10px ke atas karena nilai margin pada
boxRed. Hal ini menyebabkan boxRed bergeser ke atas sebesar 10px dan tumpang
tindih pada boxBlue.

Misalnya, . boxRed:{ margin-left: -10px; }

Di sini browser menggeser garis dasar dari tempat memulai rendering boxRed
sebesar 10px ke arah kiri karena nilai margin pada boxRed. Hal ini menyebabkan
boxRed bergeser ke kiri sebesar 10px dan tumpang tindih pada boxBlue.

Misalnya : .boxRed:{ margin-bottom: -10px; }

Halaman 17
Di sini browser, saat menghitung garis dasar untuk rendering boxBlue,
menggesernya ke atas sebesar 10px karena nilai margin pada boxRed. Hal ini
menyebabkan boxBlue bergeser ke atas sebesar 10px dan tumpang tindih pada
boxRed.

Misalnya: .boxRed:{ margin-right: -10px; }

Di sini saat menghitung garis dasar untuk rendering boxBlue, browser menggesernya
sebesar 10px ke arah kiri karena nilai margin pada boxRed. Hal ini menyebabkan
boxBlue bergeser ke kiri sebesar 10px dan tumpang tindih pada boxRed.

Contoh penggunaan properti CSS Margin

Berikut adalah beberapa kasus penggunaan praktis properti margin CSS.

1. Menyesuaikan posisi suatu elemen terhadap elemen lainnya

Kita dapat menggunakan margin untuk memberi jarak pada elemen-elemen kita satu
sama lain.
Misalnya. .boxGreen{ margin-right: 20px; }

Halaman 18
Di sini properti margin-right diatur pada boxGreen mendorong boxBlue ke kanan
sebesar 20px .

2. Ratakan tengah suatu elemen

Jika wadah induk memiliki lebar dan tinggi tetap, kita dapat memusatkan elemen di
dalamnya dengan menggunakan auto sebagai nilai margin. Browser secara otomatis
menetapkan nilai margin pada elemen untuk memastikan bahwa jarak dari wadah
induk sama.
Misalnya. .boxGreen{ margin:auto; }

Browser secara otomatis mengatur margin yang sama pada keempat sisinya
sehingga Box Green berada di tengah Box Blue.

3. Buat elemen bertumpuk

Menetapkan margin negatif pada suatu elemen dapat digunakan untuk tumpang
tindih dengan tetangganya dan menghasilkan kesan visual dari elemen yang
ditumpuk di atas tetangganya.

Misalnya .boxBlue{ margin-top:-50px; margin-left:-50px; } >

Halaman 19
Di sini kotakBiru ditempatkan 50 piksel ke atas di dalam kotakMerah.

Kesimpulan
 Margin adalah properti mendasar dalam Model Kotak CSS. Ini adalah spasi yang
kita tambahkan di sekitar Elemen HTML.
 Ada empat properti margin:
 margin-top
 margin-right
 margin-bottom
 margin-left
 Menggunakan margin negatif memungkinkan kita untuk mendekatkan elemen-
elemen yang berdekatan.
 Properti margin singkatan adalah cara khusus untuk menetapkan margin tanpa
harus menuliskannya secara terpisah untuk setiap properti margin individu. Hal ini
berguna ketika nilai berulang akan digunakan untuk properti margin yang
berbeda.

Halaman 20
Praktik 3

margin.html

Halaman 21
Penggunaan Box Model dengan Padding dan margin

box-model-paddingmargin.html

Buatlah tampilan box model seperti gambar berikut

box-model-border.html

Halaman 22
Halaman 23
Daftar Pustaka :
https://www.scaler.com/topics/css/

Halaman 24