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