Margin Dan Padding Pada CSS | Kita Ngoding CSS #09

Margin Dan Padding Pada CSS | Kita Ngoding CSS #09 |

Margin And Padding CSS.- Artikel kali ini kita akan membahas tentang margin dan padding pada css, perbedaan margin dan padding, property dan value yang digunakan, serta contoh-contoh dalam meng-implementasikannya ke html yang telah kita buat. Ini merupakan Tutorial CSS kita yang ke-9.

Margin Dan Padding CSS

Sebenarnya margin dan padding sama-sama berfungsi untuk memberikan jarak dari element-element yang kita gunakan. Namun, Perbedaan Margin Dan Padding CSS yaitu margin pada css memberikan jarak element dari luar, sementara padding pada css memberikan jarak element dari dalam.

Baca Juga : Cara Membuat Border Di CSS

Fungsi Margin Pada CSS

Seperti yang dijelaskan diatas, margin berfungsi memberikan jarak antara element dari luar. berikut adalah contoh dari margin pada css :

kode :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Margin Dan Padding</title>
<style> 
h1 {
  border: 5px solid green;
}
p {
  border: 2px solid red;
  border-radius: 5px;
  margin-top: 100px;
}
</style>
</head>
<body>
  <h1>Menggunakan Margin</h1>
  <p>Supaya lebih jelas kita gunakan border</p>
  <p>border width 2px, border sides solid, border color red</p>
</body>
</html>

Property dari margin adalah margin-top, margin-bottom, margin-left, margin-right dan lain-lain, tapi yang biasa digunakan adalah yang empat itu. pada contoh diatas admin menggunakan margin top dengan value 100px.

outputnya :

Terlihat antara border paragraf pertama dengan judul memiliki space 100pixel, begitu juga antara paragraf pertama dengan paragraf kedua.

Baca Juga : Membuat Komentar Di CSS

Fungsi Padding Pada CSS

Sementara Padding berfungsi memberikan jarak antara element dari dalam element itu sendiri, sehingga element tersebut terlihat lebih besar. berikut ini adalah contoh dari margin pada css.

kode :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Margin Dan Padding</title>
<style> 
h1 {
  border: 5px solid green;
}
p {
  border: 2px solid red;
  border-radius: 5px;
  padding-top: 100px;
}
</style>
</head>
<body>
  <h1>Menggunakan Padding</h1>
  <p>Supaya lebih jelas kita gunakan border</p>
  <p>border width 2px, border sides solid, border color red</p>
</body>
</html>

Seperti yang terlihat diatas, yang admin ganti hanyalah property margin-top menjadi padding-top, untuk yang lain admin biarkan begitu saja. Sehingga terlihat outputnya sebagai berikut.

output :

Baca Juga : Struktur HTML

Terlihat jelas bukan bordernya membesar?. Ini terjadi karena fungsi padding yang memberikan jarak kepada element dari dalam element itu sendiri.

Mudah-mudahan paham dengan apa yang admin sampaikan, semoga bermanfaat bagi admin khususnya dan semua yang membutuhkan.

Margin Dan Padding Pada CSS | Kita Ngoding CSS #09 |

Margin Dan Padding CSS

Fungsi Margin Pada CSS

Fungsi Padding Pada CSS

0 Response to "Margin Dan Padding Pada CSS | Kita Ngoding CSS #09 |"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel