CSS Padding

Properti CSS padding berfungsi untuk mengatur jarak antara  elemen dengan isi elemen, misalnya mengatur posisi teks yang ada didalam border, tabel dll. Seperti halnya css margin, dalam penerapannya Properti CSS padding, kita dapat menententukan nilainya dalam satu properti atau satu baris kode css sehingga lebih ringkas. Tetapi Properti CSS padding 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 {padding: 25px 50px 75px 100px;}
</style>

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

Penulisan diatas sama penulisannya dengan :

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

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

Anda lihat posisi teks dibawah ini :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Contoh-B

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

Penulisan diatas sama penulisannya dengan :

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

Anda lihat posisi teks dibawah ini :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Contoh-C

<style type="text/css">
div.contoh-C
{
padding: 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 :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Contoh-D

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

Penulisan diatas sama penulisannya dengan :

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

Anda lihat posisi teks dibawah ini :

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

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

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

Judul: CSS Padding; 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

• Cara hanya menampilkan judul posting saja pada halaman depan blogUpdate kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat te ... readmore
• Thread Comments Stylish Dark Edition dengan CSSPada kesempatan kali ini saya akan membahas tentang modifikasi thread comment. "Thread Comment Stylish Dark Edition dengan CSS". thread comment yang biasa dan sudah ... readmore
• Cara membuat Text-Shadow Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Pe ... readmore
• CSS CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampi ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore