Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 1 of 9

PERANCANGAN WEB

Beranda Rule Tugas Quiz UTS UAS

Semua elemen HTML dapat sebenarnya dapat dimodelkan menjadi kotak-kotak. Dalam CSS, istilah “box model” digunakan
ketika berbicara mengenai layout dan design.

Box Model CSS sebenarnya merupakan suatu kotak yang membungkus semua elemen HTML. Kotak ini terdiri dari: margin,
border, padding dan isi yang sebenarnya. Gambar di bawah ini mengilustrasikan box model

Margin

Border

Padding

Content

Penjelasan:

• Content — Bagian isi dari kotak, di mana teks dan gambar muncul
• Padding — Bagian ini mengosongkan area di sekitar content. Padding bersifat transparan
• Border — Border yang mengelilingi padding dan content
• Strong — Bagian ini mengosongkan area di luar border. Margin bersifat transparan

Properti Deskripsi CSS

box-align Menentukan alignment suatu kotak. Nilai: 3

start → elemen anak ditampilkan di bagian atas.
end → elemen anak ditampilkan di bagian dasar.
center → elemen anak ditampilkan di bagian tengah.
baseline → jika properti "box-orient" bernilai "inline-axis" atau "horizontal" maka
semua elemen anak akan di-align secara baseline.
stretch → elemen anak akan ditampilkan secara merata.

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 2 of 9

box-direction Menentukan bagaimana urutan elemen anak suatu kotak ditampilkan terbalik atau 3
tidak. Nilai:
normal → elemen anak ditampilkan dengan urutan default.
reverse → elemen anak ditampilkan dengan urutan terbalik.

box-flex Mengatur fleksibelitas elemen anak dalam suatu kotak. Nilainya merupakan rasio 3
perbandingan antar elemen.

box-ordinal-group Menentukan urutan elemen anak dalam suatu kotak. Nilainya merupakan angka, di 3
mana angka yang lebih kecil akan ditampilkan lebih dahulu.

box-orient Menentukan elemen anak ditampilkan secara "horizontal" atau "vertical". 3

box-pack Menentukan letak horizontal dalam kotak horizontal and letak vertikal bila kotak 3
merupakan kotak vertikal.

box-sizing Menentukan elemen anak agar dapat memenuhi suatu area. Misalnya jika ingin 3
membuat dua buah kotak yang berdampingan, dapat dilakukan dengan properti box-
sizing diberi nilai "border-box". Browser akan dipaksa untuk menampilkan
pengkotakan dengan ukuran yang telah ditentukan dan meletakkan border dan
paddingnya di dalam kotak tersebut. Nilai:
border-box → pada model ini, padding dan border sudah termasuk dalam ukuran
kotak.
content-box → padding dan border diluar ukuran kotak.

box-shadow Menambahkan bayangan ke dalam kotak. Syntax 3

box-shadow: h-shadow v-shadow blur spread color inset

h-shadow → menentukan posisi bayangan secara horizontal. Nilai negatif diizinkan.

(Nilai ini diperlukan)
v-shadow → menentukan posisi bayangan secara vertikal. Nilai negatif diizinkan.
(Nilai ini diperlukan)
blur → mengatur jarak blur. (Nilai ini opsional).
spread → mengatur ukuran bayangan. Nilai negatif diizinkan. (Nilai ini opsional).
color → mengatur warna dari bayangan. Nilai awal adalah hitam. (Nilai ini opsional,
tetapi pada Safari harus ditentukan agar bayangan dapat muncul).
inset → mengubah bayangan dari bayangan keluar (outset) menjadi bayangan ke
dalam.

overflow-x Mengatur isi apabila isi lebih besar daripada kotak. Nilai: 3
overflow-y visible → isi akan dibiarkan melimpah dari kotak.
hidden → isi yang melimpah akan disembunyikan.
scroll → penambahan scroll pada kotak.
auto → jika isi lebih besar maka akan otomatis ditambahkan scroll.
no-display: → jika isi tidak muat, maka seluruh kotak akan dihapus.
no-content → jika isi tidak muat, maka seluruh isi akan disembunyikan.

Penting: Ketika mengatur width dan height suatu elemen dengan CSS, maka width dan height tersebut hanya
berlaku pada bagian content saja. Sehingga untuk menghitung keseluruhan ukuran suatu elemen, harus ditambah dengan
padding, border dan marginnya.

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 3 of 9

/*Content-Box*/ /*Border-Box*/
p { p {
background: #c2f670; …
width: 500px; box-sizing: border-box;
height: 150px; width: 500px;
padding: 20px; height: 150px;
border: 2px solid gray; }
margin: 20px;
}

Properti Deskripsi CSS

border Mengatur semua properti border dalam satu deklarasi. Syntax: 1

border: border-width border-style border-color;

border-bottom Mengatur semua properti border bawah dalam satu deklarasi. 1

border-bottom-color Mengatur warna border bawah. 1

border-bottom-style Mengatur style border bawah. 1

border-bottom-width Mengatur ketebalan border bawah. 1

border-color Menentukan warna dari keempat border. Properti ini dapat memiliki satu sampai 1
empat nilai. Contohnya:

◦ border-color:red green blue pink;

◦ border atas = red
◦ border kanan = green
◦ border bawah = blue
◦ border kiri = pink

◦ border-color:red green blue;

◦ border atas = red
◦ border kiri dan kanan = green

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 4 of 9

◦ border bawah = blue

◦ border-color:red green;
◦ border atas dan bawah = red
◦ border kiri dan kanan = green

◦ border-color:red;
◦ semua border = red

border-left Mengatur semua properti border kiri dalam satu deklrasi. 1

border-left-color Mengatur warna border kiri. 1

border-left-style Mengatur style border kiri. 1

border-left-width Mengatur ketebalan border kiri. 1

border-right Mengatur semua properti border kanan dalam satu deklarasi. 1

border-right-color Mengatur warna border kanan. 1

border-right-style Mengatur style border kanan. 1

border-right-width Mengatur ketebalan border kanan. 1

border-style Mengatur style keempat border. Nilai: none, hidden, dotted, dashed, solid, double, 1
groove, ridge, inset, outset. Properti ini dapat memiliki satu sampai 4 nilai.
Contohnya:

◦ border-style:dotted solid double dashed;

◦ border atas = dotted
◦ border kanan = solid
◦ border bawah = double
◦ border kiri = dashed

◦ border-style:dotted solid double;

◦ border atas = dotted
◦ border kiri dan kanan = solid
◦ border bawah = double

◦ border-style:dotted solid;
◦ border atas dan bawah = dotted
◦ border kiri dan kanan = solid

◦ border-style:dotted;
◦ semua border = dotted

border-top Mengatur semua properti border atas dalam satu deklarasi. 1

border-top-color Mengatur warna border atas. 1

border-top-style Mengatur style border atas. 1

border-top-width Mengatur ketebalan border atas. 1

border-width Mengatur ketebalan keempat border dalam satu deklarasi. Nilai: thin, medium, thick, 1
angka dengan CSS unit. Properti ini dapat memiliki satu sampai empat nilai.
Contohnya:

◦ border-width:thin medium thick 10px;

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 5 of 9

◦ border atas = thin

◦ border kanan = medium
◦ border bawah = thick
◦ border kiri = 10px

◦ border-width:thin medium thick;

◦ border atas = thin
◦ border kiri dan kanan = medium
◦ border bawah = thick

◦ border-width:thin medium;
◦ border atas dan bawah = thin
◦ border kiri dan kanan = medium

◦ border-width:thin;
◦ semua border = thin

outline Mengatur semua properti outline dalam satu deklarasi. 2

outline-color Mengatur warna outline. 2

outline-style Mengatur style outline. 2

outline-width Mengatur ketebalan outline. 2

border-bottom-left-radius Menentukan bentuk border sudut kiri bawah. 3

border-bottom-right-radius Menentukan bentuk border sudut kanan bawah. 3

border-radius Mengatur lengkungan pada keempat border dalam satu deklarasi. Syntax: 3

border-radius: 1-4 length|% / 1-4 length|%;

Nilai properti ini dapat berupa persentase atau angka dalam CSS unit. Contoh:

border-radius:2em; border-radius: 2em 1em 4em / 0.5em 3em;

sama saja dengan: sama saja dengan:

border-top-left-radius:2em; border-top-left-radius: 2em 0.5em;

border-top-right-radius:2em; border-top-right-radius: 1em 3em;
border-bottom-right-radius:2em; border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:2em; border-bottom-left-radius: 1em 3em;

   

border-top-left-radius Menentukan bentuk border sudut kiri atas. 3

border-top-right-radius Menentukan bentuk border sudut kanan atas. 3

Properti border-image mengizinkan Anda untuk menggunakan gambar untuk menggantikan border biasa. Untuk
menggunakan properti ini, minimal diperlukan 3 nilai, yaitu:

◦ Gambar yang digunakan sebagai border,

◦ Bagaimana memotong gambar,
◦ Menentukan apakah bagian tengah akan diulang atau diregangkan.

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 6 of 9

Kita akan menggunakan gambar berikut:

Properti border-image akan memotong gambar menjadi 9 bagian, seperti papan tic-tac-toe. Kemudian, properti tersebut
akan meletakkan bagian sudut pada sudut border, dan bagian tengah akan diulang atau diregangkan sesuai yang ditentukan.

Note : Agar border-image dapat bekerja, properti border harus ditentukan!

Contoh:

Gambar sebagai border ( round ) Gambar sebagai border ( stretch )

#borderimg { #borderimg {
border: 10px solid transparent; border: 10px solid transparent;
padding: 15px; padding: 15px;
border-image: url(border.png) 30 round;} border-image: url(border.png) 30 stretch;}

Properti Deskripsi

border-image Menentukan border gambar dalam satu deklarasi.

border-image: source slice width outset repeat;

border-image-source Menentukan alamat gambar yang akan digunakan sebagai border gambar.

border-image-slice Menentukan bagaimana memotong gambar. Nilai:

angka → angka yang merepresentasikan pixel gambar,
% → persentase yang berdasarkan tinggi atau lebar dari gambar
fill → membuat bagian tengah gambar ditampilkan pada bagian tengah elemen.

border-image-width Menentukan besar dari border gambar. Nilai:

panjang → dalam satuan pixel,
angka → nilai default adalah 1. Besar border gambar adalah hasil kali angka dengan
properti border-width ,
% → mengacu pada ukuran area border gambar: lebar dari area horizontal, serta tinggi dari
area vertical,
auto → besar border gambar akan sesuai dengan lebar atau tinggi asli potongan gambar

border-image-outset Menentukan jauhnya border gambar dari kotak border. Nilai:

panjang → dalam satuan css yang menentukan jauhnya border gambar dari tepi border.
Nilai default adalah 0,
angka → jauh border gambar sesuai dengan hasil kali nilai ini dengan properti border-
width

border-image-repeat Menentukan apakah border gambar akan diulang, diulang sekaligus diperbesar/diperkecil,
atau diregangkan. Nilai:
stretch → Default. Gambar akan diregangkan sampai memenuhi area border,

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 7 of 9

repeat → Gambar diulang sampai memenuhi area border,

round → Gambar akan diulang sampai memenuhi area border. Jika tidak dapat memenuhi
area border dengan keseluruhan potongan gambar, maka gambar akan diperbesar/perkecil
sehingga pas,
space → Belum disupport browser. Gambar akan diulang sampai memenuhi area border.
Jika tidak dapat memenuhi area border dengan keseluruhan potongan gambar, maka akan
didistribusikan ruang ekstra di sekitar potongan gambar.

Padding adalah area antara isi dan border dalam suatu elemen. Nilai dari properti padding dapat berupa angka dengan CSS
unit ataupun persentase.

Properti Deskripsi CSS

padding Menentukan padding dalam satu deklarasi. Padding ada memiliki 1 sampai 4 nilai, 1
contohnya:

◦ padding:10px 5px 15px 20px;

◦ padding atas = 10px
◦ padding kanan = 5px
◦ padding bawah = 15px
◦ padding kiri = 20px

◦ padding:10px 5px 15px;

◦ padding atas = 10px
◦ padding kanan and kiri = 5px
◦ padding bawah = 15px

◦ padding:10px 5px;
◦ padding atas dan bawah = 10px
◦ padding kiri dan kanan = 5px

◦ padding:10px;
◦ semua padding = 10px

padding-bottom Mengatur padding bawah. 1

padding-left Mengatur padding kiri. 1

padding-right Mengatur padding kanan. 1

padding-top Mengatur padding atas. 1

Margin digunakan untuk mengatur area di luar border terhadap sekitarnya. Margin digunakan agar antar elemen tidak saling
berbenturan. Nilai dari margin dapat berupa angka dengan CSS unit, persentase, ataupun kata kunci "auto"(browser akan
menentukannya sendiri, biasanya objek akan diatur menjadi di tengah jika margin kiri dan kanan bernilai auto).

Properti Deskripsi CSS

margin Mengatur margin dalam satu deklarasi. Margin dapat mempunyai satu sampai empat 1
nilai. Contohnya:

◦ margin:10px 5px 15px 20px;

◦ margin atas = 10px

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 8 of 9

◦ margin kanan = 5px

◦ margin bawah = 15px
◦ margin kiri = 20px

◦ margin:10px 5px 15px;

◦ margin atas = 10px
◦ margin kanan and kiri = 5px
◦ margin bawah = 15px

◦ margin:10px 5px;
◦ margin atas dan bawah = 10px
◦ margin kiri dan kanan = 5px

◦ margin:10px;
◦ semua margin = 10px

margin-bottom Mengatur margin bawah. 1

margin-left Mengatur margin kiri. 1

margin-right Mengatur margin kanan. 1

margin-top Mengatur margin atas. 1

Note: Margin Collapse

Note: Biasanya margin atas dan bawah pada dua elemen yang bersinggungan akan digabungkan menjadi margin tunggal
yang merupakan margin terbesar dari kedua margin yang bersinggungan. Misalnya:

h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}

Margin di antara h1 dan h2 di atas seharusnya 50px + 20px = 70px. Tetapi karena margin collapse, maka margin antar
dua elemen tersebut akan menjadi 50px.

table pada dasarnya akan ditampilkan tanpa border pada browser. Untuk menampilkan table dengan lebih indah pada
browser dapat digunakan beberapa properti berikut:

Properti Deskripsi

border Mengatur semua properti border dalam satu deklarasi. Tips

Contoh membentuk border pada tabel:

table, td, th{

border: 1px solid black;
}

Karena dibentuk border pada table , td , dan th , maka akan terbentuk ruang kosong antar
border. Hal ini dapat dapat diatasi dengan menambahkan border-collapse: collapse ,
seperti yang dijelaskan di bawah.

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017

Bab XI CSS : Box Model, Padding, Border, Margin, dan Tabel Page 9 of 9

border-collapse Mengatur apakah jarak antar border yang berdampingan dihilangkan. Nilai:
separate → default, akan dipisahkan
collapse → akan digabung dan empty-cell akan diabaikan

border-spacing Mengatur jarak antar border yang berdampingan. Nilai berupa angka dengan satuan CSS, di mana
jika terdiri dari 2 nilai, nilai pertama digunakan untuk spacing horizontal dan nilai kedua untuk spacing
vertikal.

caption-side Mengatur penempatan judul tabel. Nilai:

top → default, judul ditempatkan di atas tabel
bottom → judul ditempatkan di bawah tabel

empty-cells Mengatur apakah border dan background akan ditampilkan pada sel kosong. Nilai:
show → default, menampilkan border dan background pada sel kosong
hide → tidak menampilkan border dan background pada sel kosong

table-layout Menentukan algoritma layout yang digunakan pada tabel. Nilai:

auto → default, lebar kolom atau baris ditentukan dari sel yang mempunyai isi terpanjang yang tidak
dapat dipecah-pecah. Tabel akan lebih lama ditampilkan karena semua isi tabel perlu dibaca lebih
dahulu agar dapat tentukan layout finalnya.
fixed → lebar kolom/baris ditentukan menurut lebar tabel atau kolom, bukan menurut isi sel. Tabel
dapat ditampilkan lebih cepat karena setelah baris pertama dituliskan, langsung dapat ditampilkan.

By Megawati
[email protected]
Template Design: Expression Web Tutorials & Templates
Created: March 2013; Updated May 2017

mhtml:file://D:\e-Book\Perancangan Web\Bab XI CSS Box Model, Padding, Border, Mar... 13/06/2017