CSS Margin

Properti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dll. Dalam penerapannya Properti CSS margin, kita dapat menententukan nilainya dalam satu properti atau satu baris kode css sehingga lebih ringkas. Tetapi Properti CSS margin juga dapat ditulis secara masing - masing antara bagian kanan, kiri, atas, dan bawah.

Lebih jelasnya,silahkan anda perhatikan penulisan berikut :

Contoh A

<style type="text/css">
div.contoh-A {margin: 25px 50px 75px 100px;}
</style>

<div class="contoh-A">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-A
{
margin-top:25px;
margin-right:50px;
margin-bottom:75px;
margin-left:100px;
}
</style>

<div class="contoh-A">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini : 

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh B

<style type="text/css">
div.contoh-B
{
margin: 25px 50px 75px;
}
</style>

<div class="contoh-B">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-B
{
margin-top:25px;
margin-right:50px;
margin-left-:50px;
margin-bottom:75px;
}
</style>

<div class="contoh-B">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini : 

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh C

<style type="text/css">
div.contoh-C
{
margin: 50px 25px;
}
</style>

<div class="contoh-C">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-C
{
margin-right:25px;
margin-left-:25px;
margin-top:50px;
margin-bottom:50px;
}
</style>

<div class="contoh-C">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Contoh D

<style type="text/css">
div.contoh-D
{
margin: 50px;
}
</style>

<div class="contoh-D">TEKS DISINI</div>

Penulisan diatas sama penulisannya dengan :

<style type="text/css">
div.contoh-D
{
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:50px;
}
</style>

<div class="contoh-D">TEKS DISINI</div>

Anda lihat posisi teks dibawah ini :

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dengan kata lain Css adalah merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Catatan : Untuk satuan nilai kita bisa menggunakan satuan " cm, px, em, atau %"

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihatperbedaan 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.

Judul: CSS Margin; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS FONTFitur Css Font memang sangat diperlukan dalam pembuatan website. Beberapa kegunaan fitur Css Font yang bisa digunakan diantaranya seperti :Mengatur jenis fontMengat ... readmore
• CSS Border-RadiusFungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - rad ... readmore
• Cara Membuat Rounded Corner Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti :  efek rounded corner, text shadow ... readmore
• Membuat Thread Comment BertingkatMembuat Thread Comment Bertingkat - kali ini saya akan membahas  tentang bagaimana cara memebuat agar Thread comment betingkat sepeti gambar diatas. kode CSS-n ... readmore
• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore