Margin dan Padding

Oleh Admin

Sunday 14 December 2014

Bagikan :

Tweet

Fungsi margin dengan padding, bahwa kedua fungsi tersebut sebenarnya hampir sama walaupun keduanya berbeda, dan di bawah ini akan dijelaskan dungsi dari margin dan padding tersebut.

Margin

Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.

Contoh pengkodean dari margin tersebut seperti dibawah ini

123456body {
Margin-top : 10px ;
Margin-rigth : 5px;
Margin-bottom : 0px;
Margin-left : 5px;
}

yang menjadi patokan dari fungsi ini adalah dimulai dari atas, kanan, bawah dan kiri, atau bila berdasarkan talar kita adalah searah dengan jarum jam. 

Dari keterangan dari pengkodean margin di atas, dapat di gabungkan menjadi

1234
Margin : 10px 5px 0px 5px; /*atas 5, kanan 5, bawah 0, kiri 10*/
Apabila value seperti ini, dapat diringkas kembali menjadi seperti ini
Margin : 10px 5px 0px; /*atas 5, kanan 0, bawah 5, kiri 0*/

Padding

Seperti yang telah saya terangkan di atas bahwa fungsi margin dengan padding sebenarnya hampir sama walaupun keduanya berbeda, dan yang membuat berbeda dari fungsi padding ini yaitu fungsi padding mengatur seleksi batas jarak pada bagian dalam (lihat gambar)

Contoh pengkodean dari Padding tersebut seperti dibawah ini

12345body {Padding-top : 15px ;
Padding-rigth : 5px;
Padding-bottom : 15px;
Padding-left : 5px;
}

Dari keterangan pengkodean dari Padding di atas, dapat di gabungkan menjadi

123Padding : 15px 5px 15px 5px
atau bila value seperti ini dapat di singkat kembali seperti ini
Padding : 15px 5px;

Silahkan di praktekkan kembali untuk mengetahui lebih jauh tentang fungsi dari kedua fungsi margin dan padding ini.

Tag : CSS