News Flash
Selamat datang dan berkunjung .....

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

Padding & Margin
Linkom
"..domain, hosting, aplikasi, kemauan .."

Admin website
Administrator

ARTIKEL TERBARU

Sekilas Aplus

Aplus adalah Aplikasi Pengumuman Kelulusan Sekolah. Aplus menjadi nama Aplikasi Pengumuman Kelulusan Sekolah agar mudah dikenal oleh pemakainya. Aplus dibuat untuk memenuhi kebutuhan sekolah untuk menginformasikan kelulusan siswa tanpa kertas (Salam Go Green). Aplus cukup membantu sekolah dalam menyajikan informasi...

Read more...

ARTIKEL LAINNYA

INFO BISNIS

  • Website Sekolah

    Sebuah website memerlukan Domain, Hosting, dan Aplikasi Website, kami siap membantu Anda

    Hubungi CS : 0811-783-2203
    Link Web : linkom.id
  • Perlengkapan Ujian

    Untuk pelaksanaan Ujian di Sekolah,  kami menyediakan LAN, Kabel Jaringan, Server Original, Server Rakitan, Headset, dll...

    Hubungi CS : 0811-783-2203
    Link Web : linkom.id
  • Peralatan IT

    Komputer, Laptop, Printer, Projektor, Website, Media Pembelajaran, LAN,  Buku, dll, kami siap membantu Anda...

    Hubungi CS : 0811-783-2203
    Link Web : linkom.id
  • Theme Sekolah

    Website yang cantik, sederhana, langsing, dan praktis juga dapat diatur sendiri tampilannya sehingga lebih komunikatif, kami siap membantu....

    Hubungi CS : 0811-783-2203
    Link Web : linkom.id
  • SIPLah

    Kami siap melayani belanja melalui SIPLah....

    Hubungi CS : 0811-783-2203
    Link Web : linkom.id