CSS Padding & Margin

Mengatur padding dan margin elemen

1. padding : adalah jarak dalam elemen.
Yaitu : Jarak antara garis batas elemen dengan konten yang berada didalamnya.
2. margin : adalah jarak luar elemen.
Yaitu : Jarak antara garis batas elemen dengan elemen lain yang berada diluarnya.

Padding dan Margin selalu berkaitan dengan Border yaitu garis batas terluar dari suatu elemen.

Struktur elemen

<div>
<span class='teks-1'>Teks Teks</span>
<span class='teks-2'>Teks Teks</span>
<style>
span.teks-1 {
      border: 1px solid red;
      background: greenyellow;
      padding: 5px 10px 15px 20px;
      margin: 50px 10px
}
</style>

Teks TeksTeks Teks

Penulisan nilai padding & margin.

1 nilai,padding : 10px = semua sisi atas,kanan,bawah,kiri: 10px
2 nilai,padding : 10px 5px = atas & bawah :10px, kanan & kiri: 5px
3 nilai,padding : 10px 5px 0 = atas: 10px, kanan:5px, bawah:0 & kiri= nilai kanan.
4 nilai,padding : 10px 5px 0 10px = atas: 10px, kanan: 5px, bawah: 0, kiri: 10px.
Penulisan tersebut berlaku untuk padding dan margin.
Penulisan nilai berurutan searah jarum jam.

<p class='tes'>ini adalah contoh
<span> teks span</span> didalam paragraf</p>
<p>Ini adalah contoh teks normal didalam paragraf.</p>
<p>Ini adalah contoh teks normal didalam paragraf.</p>
<style>
p {border: 1px solid gray}
p.tes {
   padding-left: 10px;
   background: wheat;
   margin-bottom: 60px;
  }
p.tes span {
   padding: 0 20px;
   border: 1px solid blue;
   background: yellow;
  }
</style>

Ini adalah contoh "teks span" didalam paragraf.

Ini adalah contoh "teks normal" didalam paragraf.

Ini adalah contoh "teks normal" didalam paragraf.