Belajar CSS Part 4 : Margin dan Padding pada CSS


Belajar CSS 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 sisi 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 penggunaannya pada CSS.

Mengenal Margin pada CSS

Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar element. anda 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

index.html

style.css

mengenal margin pada css

mengenal margin pada css

perhatikan pada contoh di atas. pada kotak dua kita mengatur margin-left atau margin kiri sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau jarak luar segala sisi sebesar 20px.

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 tentukan. sama seperti margin yang memiliki sisi-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, pading 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 anda 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

index.html

style.css

Belajar CSS Margin dan Padding pada CSS

Belajar CSS Margin dan Padding pada CSS

sekian contoh dan penjelasan tentang margin dan padding pada tutorial belajar css margin dan padding pada css.

Incoming search terms:

  • mengatur padding pada bootsrap
  • contoh coding margin dan padding
  • coding padding untuk html
  • cara menggunakan padding css
  • cara membuat margin pada font menggunakan css
  • cara membuat margin di html
  • cara centerkan margin atas bawah link a href html
  • cara atur jarak css
  • belajar padding dan margin di css
  • belajar css padding margin adalah




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • One Comment

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]