Untuk mengatur border atau bingkai suatu layer dalam CSS dapat menggunakan properti border, sementara untuk mengatur jarak antar objek menggunakan properti margin, dan untuk mengatur jarak di dalam objek atau layer dapat menggunakan properti padding. Lebih lengkapnya dapat mempelajari cara penggunaannya seperti di bawah ini:
Border Property
- Border-style-type, untuk mengatur jenis garis bingkai yang digunakan dengan nilai solid, dotted, dashed, double, groove, ridge, inset, outset, none. Contoh:
div {
border :double;
} - Border-bottom/right/left/top-style, untuk mengatur jenis garis bingkai bagian tertentu yang digunakan dengan nilai solid, dotted, dashed, double, groove, ridge, inset, outset, none. Contoh:
div {
border-bottom-style : groove;
} - Border-bottom/right/left/top-width, untuk mengatur besar garis bingkai bagian tertentu. Contoh:
div {
border-bottom-width : 5 em;
} - Border-bottom/right/left/top-color, untuk mengatur warna garis bingkai bagian tertentu. Contoh:
div {
border-bottom-color : green;
}
Margin dan Padding Property
- Margin, untuk mengatur batas atas, bawah, kiri dan kanan halaman web. Contoh:
div {
margin-top : 0 px;
margin-right : 1 px;
margin-bottom : 2 px;
margin-left : 3 px;
}
* Penulisan margin di atas dapat disingkat menjadi, margin: 0px 1px 2px 3px;
* Gunakan margin: auto; agar posisi elemen ke tengah - Padding, untuk mengatur batas atas, kanan, bawah, kiri antara garis bingkai dengan isi. Contoh:
div {
padding-top : 2 cm;
padding-right : 2 cm;
padding-bottom : 2 cm;
padding-left : 2 cm;
border-top-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-left-style : solid;
}
Demikianlah tutorial tentang penggunaan border, margin dan padding property dalam CSS yang tentu saja sangat berguna dalam mengatur tampilan halaman web.