CSS BOX dan Fungsinya

Fitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, dan sesuai fungsi tata letaknya Fitur Css Box terdiri atas: margin, border, padding, dan konten.



    * Properti Margin berfungsi membuat ruang kosong atau memberikan jarak disekitar border.
    * Properti Border yaitu Sebuah batas yang terjadi di sekitar padding dan konten.
    * Properti Padding berfungsi membuat ruang kosong atau memberikan jarak disekitar konten.
    * Properti Content berfungsi sebagai Isi kotak, di mana teks dan gambar ditampilkan

Lebih jelasnya silahkan perhatikan gambar dibawah ini :

Berikut kode penggunaan box dalam fitur css :

<style type="text/css">
div.contoh
{
margin:15px;
width:400px;
border:10px solid green;
padding:10px;
}
</style>

<div class="contoh">Contoh ini menunjukkan bahwa margin atau jarak dari kiri hingga border dengan nilai 15px, sedang jarak dari border hingga konten atau teks ini dengan nilai 10px. Dan lebar border 40opx dengan ketebalan border 10px</div>

Berikut hasilnya :

Contoh ini menunjukkan bahwa margin atau jarak dari kiri hingga border dengan nilai 15px, sedang jarak dari border hingga konten atau teks ini dengan nilai 10px. Dan lebar border 400px dengan ketebalan border 10px

Ok...., Silahkan anda bisa coba mengganti nilai-nilai dari margin, border, lebar border, atau paddingnya sesuka anda, agar terlihat perbedaan hasilnya.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "CSS BOX dan Fungsinya" Diulas Oleh : Noercholis | Rabu, 30 Maret 2011 | 21.04 Description : Fitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang ... Label : css,css dasar Rating : 6.4 Dari 10, Berdasarkan 200+ Dari 2 000+ Pengunjung.
Sampai saat ini baru ada : 2 komentar >>> Silahkan tambahkan komentar Anda...