2 Cara paling mudah untuk Menambahkan Padding Sekitar Gambar di HTML

Padding sekitar gambar berarti ruang kosong di sekitar gambar. Jika Anda melampirkan gambar ke situs web Anda menggunakan HTML, maka Anda akan perlu menambahkan bantalan di sekitarnya dan di sini di posting ini, saya akan memandu Anda bagaimana untuk melakukannya. Saya sudah 2 metode yang sangat sederhana untuk menambahkan bantalan di sekitar gambar di HTML. Berikut ini Cara Tambahkan Padding Sekitar Gambar di HTML Dua metode sederhana untuk menyiapkan padding di sekitar gambar di HTML adalah sebagai berikut: Metode # 1: Menggunakan hspace dan vSpace Atribut Kedua atribut ini digunakan untuk menentukan spasi sekitar

A+ A-

Padding sekitar gambar berarti ruang kosong di sekitar gambar. Jika Anda melampirkan gambar ke situs web Anda menggunakan HTML, maka Anda akan perlu menambahkan bantalan di sekitarnya dan di sini di posting ini, saya akan memandu Anda bagaimana untuk melakukannya. Saya sudah 2 metode yang sangat sederhana untuk menambahkan bantalan di sekitar gambar di HTML.

Berikut ini Cara Tambahkan Padding Sekitar Gambar di HTML

Padding Sekitar Gambar
Padding Sekitar Gambar

Dua metode sederhana untuk menyiapkan padding di sekitar gambar di HTML adalah sebagai berikut:

Metode # 1: Menggunakan hspace dan vSpace Atribut

Kedua atribut ini digunakan untuk menentukan spasi sekitar gambar. Hspace menempatkan ruang putih di sisi kiri dan kanan gambar sedangkan atribut vspace menentukan ruang putih di sisi atas dan bawah gambar.

Berikut sintaks menggunakan hspace dan vSpace atribut:

<img hspace="pixels" vspace="pixels">

Sekarang, inilah contoh dari suatu gambar dengan 20 piksel padding di sekitarnya dengan bantuan hspace dan vSpace atribut:

<p><img src="example.gif" alt="Alternative Text" width="42" height="42" align="middle" hspace="20" vspace="20">This is some text. This is some text. This is some text.</p>

Cukup gunakan sintaks ini untuk menambahkan bantalan atau marjin sekitar gambar. Tidak mudah untuk menambahkan bantalan di sekitar gambar menggunakan hspace dan vSpace atribut?

Tapi, sebelum menggunakannya di mana saja Anda harus berhati-hati dari masalah kompatibilitas. Kedua atribut ini dari <img> tidak didukung di HTML5. Jadi, Anda dapat menggunakan CSS sebagai gantinya. Dan metode kedua adalah semua tentang pengaturan padding sekitar gambar menggunakan CSS.

Metode # 2: Menggunakan CSS Padding Properti

Seperti yang saya di atas mengatakan kepada Anda hspace dan vSpace atribut tidak bekerja di HTML5 tetapi CSS bekerja di hampir setiap teknologi baru.

Berikut contoh penggunaan properti padding HTML dalam <img> tag:

<img style="float: left; padding: 15px 5px 10px 20px;" src="example.jpg"/>

The padding properti dapat memiliki dari satu sampai empat nilai.

padding: 25px 50px 75px 100px;

  • padding atas adalah 25px
  • Padding tepat adalah 50px
  • Padding bawah adalah 75px
  • Padding kiri 100px

padding: 25px 50px 75px;

  • padding atas adalah 25px
  • paddings kanan dan kiri adalah 50px
  • Padding bawah adalah 75px

padding: 25px 50px;

  • paddings atas dan bawah yang 25px
  • paddings kanan dan kiri adalah 50px

padding: 25px;

  • keempat paddings adalah 25px

HARUS BACA: Editor Waktu HTML Nyata Dengan Preview

Itu semua guys! Saya berharap dengan bantuan artikel ini Anda akan dapat menambahkan bantalan di sekitar gambar apapun di HTML. Biarkan aku tahu metode mana yang Anda suka lebih? Atau apakah ada orang yang ingin berbagi metode lainnya untuk sama? kotak komentar kami yang menunggu untuk Anda.