Margin Dan Padding Pada CSS

Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah website dengan menggunakan CSS, karena margin dan padding di gunakan untuk mengatur dalam dari pada sebuah element dan mengatur sisi sebelah luar dari sebuah element, untuk itu pada tutorial belajar CSS dasar Margin dan Padding pada CSS ini akan dijelaskan tentang apa itu margin ? apa itu padding ? dan bagaimana cara menggunakannya pada CSS.

Mengenal Margin pada CSS

Margin adalah sisi luar dari sebuah element, misalnya kalian ingin mengatur jarak antar element. Kalian bisa menggunakan syntax margin untuk mengaturnya, terdapat beberapa sisi luar margin yaitu margin atas di tuliskan pada CSS dengan ( margin-top ), margin bawah atau jarak luar bagian bawah di tulis di CSS dengan ( margin-bottom ), ( margin-left ) sebagai jarak luar sebelah kiri element, dan ( margin-right ) adalah sisi luar pada bagian sebelah kanan tetapi jika anda hanya menggunakan syntax ( margin ) saja maka akan secara otomatis mengatur jarak atas, bawah, kiri dan kanan element. Berikut ini adalah contoh penggunaan margin pada CSS :

latihan.html

latihan.css

Hasilnya…

Coba kalian perhatikan pada contoh di atas yang telah saya buat. Pada kotak 2 saya mengatur pargin-left atau margin kiri sebesar 70px atau 70pixel. Dan pada kotak 1 saya memberikan margin / jarak luar segala sisi sebesar 20px atau 20pixel.

Mengenal Padding pada CSS

Padding adalah sisi dalam dari sebuah element, kita bisa menggunakan syntax padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tantukan, sama seperti margin yang memiliki sisi. Seperti top, left, right, bottom, jenis padding yaitu, padding atas di tuliskan pada CSS dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah atas sebuah element, padding bawah atau jarak dalam bagian bawah di tulis di CSS dengan ‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’ adalah sisi luar pada bagian sebelah kanan. Jika kalian hanya menggunakan syntax ‘padding’ saja maka akan secara otomatis mengatur jarak atas, bawah, kiri dan kanan element yang bagian dalam. Berikut ini adalah contoh penggunaan padding pada CSS :

latihan.html

latihan.css

Mungkin sampai disini dlu untuk tutorial Belajar CSS Dasar Part 4 nya nanti saya akan menyambung tutorial Belajar CSS Dasar di Part 5 sampai bertemu kembali para calon web design