Blog Request tutorial? klik disini!

  • Pengertian Padding Dan Margin

    Ditulis oleh: Billiyam
    3126 kali dibaca
    19 Jul / 2014 20:18

    Haloo teman – teman kali ini saya akan menjelaskan perbedaan margin dan padding pada CSS.

    Sebelumnya mungkin sudah ada yang mengerti tentang apa itu Margin dan padding pada CSS.

    Margin adalah mengatur jarak dari luar.

    Padding adalah mengatur jarak dari dalam.

    Sedangkan untuk penulisan padding seperti ini :

    1.       Padding : 10px;

    Artinya setiap sisi yaitu top, right, bottom, left atau atas, kanan, bawah, kiri sama – sama memiliki jarak kedalam sebesar 10px; yang di beri padding adalah kotak coklat muda .perhatikan gambar di bawah ini

    1.       Padding-top:10px;

    Artinya hanya sisi atas memiliki jarak 10px.

    2.       Padding-right:10px;

    Artinya hanya sisi kanan memiliki jarak 10px.

    3.       Padding-bottom:10px;

    Artinya hanya sisi bawah memiliki jarak 10px.

    4.       Padding-left:10px;

    Artinya hanya sisi left memiliki jarak 10px.

    Kemudian untuk menyingkat penulisan jika setiap sisi mempunyai jarak yang berbeda:

    1.       Padding:10px 25px;

    Artinya 10px pertama dimiliki top dan 10px yang kedua adalah bottom sedangkan 25px kiri dan sisi kanan.

    2.       Padding:10px 20px 30px 40px;

    Artinya 10px Top , 20px Right, 30px bottom dan 40px left. Cara bacanya searah jarum jam ya dari atas, kanan, Bawah dan kiri.

    3.       Padding:10px 20px 30px 0;

    Artinya 10px top, 20px right, 30px bottom, 0 left

    4.       Padding:10px 20px 30px;

    Artinya 10px top, 20px right, 30px bottom, 20px right. Kenapa right 20px karena tidak di isi value 0. Maka left akan mengikuti right, yaitu 20px;

    Bagaimana cara penulisan margin ? penulisannya sama seperti padding hanya saja padding di ganti margin seperti contoh di atas .

    Margin:10px

    Margin-top:10px;

    Margin-right:10px;

    Margin-bottom:10px;

    Margin-left:10px;

    Begitu juga dengan penyingkatan penulisannya

    1.       Margin:10px 25px;

    2.       Margin:10px 20px 30px 40px;

    3.       Margin:10px 20px 30px 0;

    4.       Margin:10px 20px 30px;

    Perhatikan gambar di bawah ini

    Jika kotak abu abu saya kasih margin-left sebesar 10px; maka akan bergeser kekanan sebesar 10px;

    Terimakasih. Sampai jumpa di artikel berikutnya dan semoga bermanfaat. Mohon maaf lahir dan batin ya :D






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155