Cara menggunakan fungsi padding di html

Halo semuanya, pada pembahasan kali ini badoystudio akan mengulas tentang penggunaan margin dan padding pada CSS untuk mendesain website. Ingin tahu lebih banyak seperti apa rasanya?

Table of Contents Show

Properti yang umum digunakan di CSS
Pengertian dan Fungsi Margin pada CSS
Cara Menggunakan Margin di CSS
Margin – Properti Pendek/ Pendek
Margin – Nilai Otomatis
Pengertian dan Fungsi Padding pada CSS
Cara Menggunakan Padding di CSS
Menulis Properti Lengkap
Menulis Properti Singkat
Apa fungsi padding pada HTML?
Saat menggunakan properti padding, apakah kita diperbolehkan menggunakan nilai negatif?
Apa itu padding top?
Apa Fungsi margin di CSS?

Daftar isi

Properti yang umum digunakan di CSS

Dari sekian banyak properti CSS yang digunakan untuk mendesain website yang dibangun dengan HTML, properti margin dan padding adalah yang paling banyak digunakan. Karena fungsi utama keduanya adalah mengatur jarak luar dan dalam antar elemen HTML

Pengertian dan Fungsi Margin pada CSS

Margin adalah area kosong di luar elemen HTML. Fungsi utama dari margin adalah untuk mengatur jarak pada sisi luar elemen HTML. Untuk lebih jelas silahkan lihat gambar berikut ini

Sumber. learnwebcode. com

Cara Menggunakan Margin di CSS

Ada beberapa cara untuk menggunakan margin di CSS, yaitu

Margin – Properti Pendek/ Pendek

Margin sendiri memiliki 4 sisi yaitu margin atas, kanan, bawah, dan kiri. Nah, untuk mempersingkat penulisan kode, Anda bisa mendefinisikan semua properti margin hanya dengan menulis satu saja

Sebagai contoh

jika kita ingin menetapkan nilai properti

Batas atas. 25 piksel
Batas kanan. 50px
Margin bawah. 75 piksel
Batas kiri. 100 piksel

Tulis saja properti margin seperti ini di CSS

margin: 25px 50px 75px 100px;

Contoh lengkapnya seperti kode di bawah ini

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Menggunakan Margin dengan Properti Singkat</h2>

<div>Ini adalah contoh penggunaan dari margin dengan properti yang singkat</div>

<hr>

</body>
</html>

Hasil

Jika kita memberikan nilai yang sama untuk setiap margin. Jadi, tulis saja propertinya seperti ini

margin : 50px,

Artinya kita sudah memberi nilai pada semua properti margin kanan, kiri, atas, bawah dengan nilai 50 px

Demikian pula jika Anda ingin menentukan 2 nilai margin yang sama. Naik turun. 25 px, dan kanan – kiri. 50 px, lalu tulis saja

margin : 25px, 50px;

Margin – Nilai Otomatis

Anda juga bisa mengatur properti margin menjadi auto, dimana nantinya margin tersebut akan membagi ruang yang tersisa secara merata menjadi margin kanan atau kiri

Contohnya adalah sebagai berikut

Nah, sampai disini kalian sudah tahu bagaimana cara menggunakan margin di css yaitu

Tulis properti margin secara lengkap
Tulis secara singkat properti margin
Atau gunakan nilai otomatis

Pengertian dan Fungsi Padding pada CSS

Padding adalah area kosong di sisi elemen HTML. Fungsinya untuk memberikan jarak antar elemen HTML yang ada di dalamnya. Untuk lebih memahaminya, silahkan lihat gambar di bawah ini

Sumber. blog hub spot

Cara Menggunakan Padding di CSS

Mirip dengan menggunakan margin, menggunakan padding di CSS bisa dilakukan dengan

Menulis Properti Lengkap

Padding ada 4 sisi yaitu

Bantalan atas / atas
Bantalan bawah
Padding kanan / kanan
Padding kiri

Contoh penggunaan properti complete adalah seperti di bawah ini

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>

<h2>Menggunakan Properti Lengkap</h2>

<div>Ini adalah padding menggunakan properti lengkap</div>

</body>
</html>

Hasilnya adalah

Menulis Properti Singkat

Anda juga bisa menyingkat nilai padding seperti penjelasan margin di atas. Contoh tulisan

padding : 25 px, 30px, 40px, 50px;

artinya sama dengan

Padding atas 25px
Padding bawah 30px
Padding kanan 40px
Dan padding kiri 50px

Atau bisa juga menuliskan satu nilai saja jika semua nilai sama untuk semua sisi

Padding : 50px;

Dan bisa juga menulis hanya 2 nilai untuk kedua sisi yang sama, atas - bawah dan kanan - kiri

Padding : 25px 50px;

Penutupan

Itulah pembahasan tentang margin dan padding pada CSS. Semoga menambah wawasan dan bermanfaat bagi Anda. Dan jangan lupa untuk membagikannya kepada teman-teman Anda yang lain agar manfaatnya menyebar lebih luas

Apa fungsi padding pada HTML?

Padding adalah space atau ruang kosong antara satu konten dengan konten lainnya. Dengan padding , tampilan website akan lebih tertata dan lebih menarik.