Ads by Yasya El Hakim
Tutorial CSS Tingkat Dasar: Margin, Padding, dan Border - Bagian 5

Margin dan Padding

margin dan padding adalah dua properti yang paling umum dan sering digunakan untuk mengatur jarak (Spacing Out) pada setiap elemen. Margin dapat digunakan untuk mengatur jarak ke luar ruang, sedangkan Padding dapat digunakan untuk mengatur jarak ke dalam ruang.

Ubahlah kode CSS dari tag h2 berikut:

h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 20px;
    padding: 40px;
}


Contoh kode diatas akan membuat jarak ruang ke luar (margin) menjadi 20 pixel pada Heading 2 dan juga akan membuat jarak kedalam (padding) menjadi 40 pixel.

Model Kotak

Margins, padding dan border (kalian dapat mempelajari ketiga hal tersebut pada bab selanjutnya) merupakan bagian yang dikenal dengan isitilah Model Kotak (Box Model). Box Model dapat bekerja seperti: Diposisi tengah, kalian dapat meletakkan konten (katakanlah sebuah gambar), bagian yang mengelilingi posisi tengah itu merupakan padding, disekelilingnya lagi kalian akan melihat border dan dikelilingi lagi dengan margin. Secara visualnya akan terlihat seperti berikut:
Margin box
Border box
Padding box
Element box
Kalian tidak perlu menggunakan contoh diatas, tetapi contoh diatas hanya untuk tempilan (preview) yang mungkin dapat  membantu kalian dalam mengingat serta memahami Box Model.

Border

Border dapat kita gunakan pada semua elemen HTML.

Untuk membuat border (garis batas) disekitar elemen, kalian dapat menggunakan property border-style. Nilai dari property tersebut dapat berupa: solid, dotted, dashed, double, groove, ridge, inset, dan outset.

Border Solid
Border Dotted
Border Dashed

Property border-width dapat kalian gunakan untuk mengatur lebar border, biasanya dengan menggunakan nilai berupa pixel. Terdapat juga property lain seperti border-top-width, border-right-width, border-bottom-width dan border-left-width.

Terakhir, kalian dapat menggunakan property border-color untuk mengatur warna border.

Tambahkan kode berikut kedalam file CSS:

h2 {
    border-style: dashed;
    border-width: 3px;
    border-left-width: 10px;
    border-right-width: 10px;
    border-color: red;
}


Kode diatas dapat membuat garis batas putus-putus yang berwarna merah pada semua elemen Heading 2 (h2) yang memiliki lebar atas dan bawah 3 pixel serta memiliki lebar kiri dan kanan 10 pixel.

Sebelumnya: Tutorial CSS Tingkat Dasar: Teks - Bagian 4
Selanjutnya: Tutorial CSS Tingkat Dasar: Penggabungan CSS - Bagian 6
Daftar Isi: Tutorial CSS Tingkat Dasar

0Komentar

Sebelumnya Selanjutnya