27 June 2007

Padding and Margin

Hal yang sering digunakan untuk mempercantik halaman web adalah dengan cara memberikan jarak antara satu elemen dengan elemen lainnya. Untuk mengatur kedua hal itu, CSS menawarkan solusinya dengan menawarkan variabel-variabel yang berhubungan dengan peletakan elemen tadi, yaitu padding dan margin.

Padding merupakan jarak antara isi dari elemen dengan garis terluar dari elemen itu sendiri, sedangkan margin adalah jarak antara satu elemen dengan elemen lainnya. Dalam CSS, variabel padding dan margin bisa ditulis dengan beberapa cara. Cara pertama adalah dengan menuliskan masing-masing padding/margin untuk setiap sisi yang berbeda.


margin-top: 3px;

margin-bottom: 5px;

margin-left: 10px;

margin-right: 6px;

Cara kedua adalah menggabungkan keempat kode diatas menjadi satu variabel yang lebih ringkas. Dengan cara ini, setiap ukuran padding/margin dituliskan berdasarkan arah jarum jam. Jadi yang pertama adalah top, lalu right, kemudian bottom, dan terakhir left. Perhatikan contoh dibawah ini.



padding: 3px 6px 5px 10px;

Terakhir, bila jarak semua margin sama, anda bisa menuliskannya dengan lebih ringkas lagi, yaitu cukup dengan menuliskan, margin: 5px, atau padding: 5px. Semua contoh yang diberikan disini memang hanya menggunakan satuan piksel(px) untuk setiap jarak yang ada, namun sebenarnya anda juga bisa mempergunakan satuan-satuan lain, seperti punt/point(pt), ataupun e.m.

Dan untuk bisa lebih memahami perbedaan antara padding dan margin itu sendiri, anda bisa memperhatikan contoh screen shoot berikut ini.

No comments:

Post a Comment