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 buat slide show CarouselMenambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show ... readmore
• Mengenal 5 bagian utama pada template bloggerMemiliki Blog sangat menyenangkan, tapi terkadang kita masih merasa kesulitan pada saat kita ingin mengedit template. Walaupun sudah banyak tutorial-tutorial yang d ... readmore
• CSS BOX dan FungsinyaFitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, da ... readmore
• Percantik Tampilan Label Cloudmu Dengan CSS Permintaan sahabat blogger dalam bentuk komentar di salah satu  postingan OOM RIO untuk meminta dibuatkan tutorialnnya. Kelebihan dari modifikasi widget ... readmore
• Cara membuat Bar mengambang atau Floating Bar on Top pada blogFloating Bar sering kali kita jumpai ketika kita membuka blog atau merefressnya kembali. Floating Bar tersebut seperti pop up, biasanya berisi iklan teks, banner, a ... readmore