Pengertian Apa Itu Margin Dan Padding Pada Blog

Pengertian apa itu Margin dan Padding pada blog - Jika anda adalah seorang yang telah berpengalaman dengan kode css atau biasa disebut css developer tentu tidaklah asing lagi bagi kalian apa itu margin dan pading pada sebuah blog. Dibalik  hal ini ternyata masih banyak juga orang-orang lain yang masih bingung dengan hal ini,  oleh karena itu kami mencoba membagikan serta menjelaskan apa itu margin dan pading pada sebuah blog.

Apa Itu Margin ?

Margin merupakan sebuah ruang disekitar elemen atau konten. Sebuah margin akan membentuk daerah atau ruang vertikal dan horizontal diantara elemen. Jika sebuah eleen tidak memiliki margin maka elemen tersebut mungkin akan terkesan lebih rapat saling bertemu terhada satu sama lain. Agar sebuah margin dapat bekerja dengan baik, elemen biasa diikuti oleh posisi float atau relative.

Margin akan dapat diatur menggunakan properti margin yaitu ‘shorthand’ (istilah yang  mewakili empat nilai dari margin untuk sebuah elemen) atau dengan penulisan ‘longhand’. Berikut ini adalah contoh dari penulisan shorthan.

#element { margin: 15px; }

Cide diatas berarti elemen ini memiliki margin yang sama yaitu 15px untuk setiap sisi elemennya.

#element { margin: 10px 20px; }

Ini dapat diartikan bahwa elemen ini memiliki margin-top, margin-bottom = ‘10px’ dan margin-left, margin-right = ‘20px’

#element { margin: 10px 15px 5px 15px; }

Elemen ini memiliki sebuah margin-top : 10px, margin-right : 15px, dan margin-left : 15px

Kemudian berikut ini adalah cara penulisan margin dengan longhand

#element { margin-top: 10px; margin-right: 15px; margin-bottom: 5px; margin-left:15px;}

Apa Itu Padding

Setelah dengan margin kemudian bagaimana dengan padding apa itu padding ? arti padding sebenarnya sama saja dengan margin, namun perbedaannya padding memiliki sifat inside space dari elemen yang diatur disekitar area konten. Lengkapnya padding merupakan ruang horizontal & vertikal yang diatur di sekitar area konten/isi dari elemen yang telah ditargetkan. Intinya padding berada pada bagian dalam kotak atau berada dalam konten bukan diluar. Padding ini tiak mempengaruhi sebauh jarak dari elemen yang satu ke elemen lainnya, namun hanya mendefinisikan jarak inner antara tepi dan isi dari elemen.

Sama dengan margin, penulisan padding juga dapat dengan cara shorthand dan juga longhand. Berikut contoh shorthand pada padding :

#element { padding: 10px; }

arti da kode ini adalah padding pada elemennya sama 10px disetiap sisinya.

#element { padding:10px 15px 5px 15px; }

Ini dapat diartikan bahwa elemen memiliki padding-top: 10px, padding-right: 15px padding-bottom: 5px, dan padding-left:15px

Dibawah ini adalah salah satu contoh versi panjang atau long hand pada padding

#element { padding-top: 15px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px;}

Kode diatas ini memiliki arti yang sama persis dengan kode padding shorthand kedua diatas.

Mungkin hanya cukup begitu yang dapat sampaikan kepada anda semua. Semoga anda tidak bingung tentang pengertian margin dan padding ini. Mungkin dengan begini anda sudah dapat mengetahui sedikit tentang pemahaman margin dan padding atau bahkan anda sudah paham betul dengannya.

Dengan anda membacanya secara penuh ini mungkin akan meyegarkan pengetahuan anda mengenai CSS dan menggunakan CSS sebagai pengatur style dan tata letak pada blog anda sendiri. Jika anda masih bingung tentang margin dan padding anda bisa menanyakannya lewat contact kami atau bisa langsung berkomentar dibawah, disini kami mungkin akan membantu anda agar lebih memahami betul tentng apa itu margin dan padding.