Tutorial CSS : Membuat Padding CSS

CSS
27 Jul 2022
1769

Padding CSS berfungsi untuk memberikan ruangan di dalam sebuah elemen, di dalam border dari sebuah elemen. Berbeda dengan margin CSS yang memberikan ruang di luar elemen.

Margin sebuah elemen bisa diatur dengan property:

  • margin-top : memberikan jarang sebelah atas di luar elemen.
  • margin-bottom : memberikan jarang sebelah bawah di luar elemen.
  • margin-left : memberikan jarang sebelah kiri di luar elemen.
  • margin-right : memberikan jarang sebelah kanan di luar elemen.

Daftar Isi

Atau kamu bisa mengatur semua margin dengan property marginsekaligus. Mengenai margin shorthand akan kita bahas dibawah.

Adapun value dalam margin bisa berupa:

  • pixel: contohnya 100px
  • %: contohnya 10%
  • inherit

Margin Shorthand

Seperti yang kita bahas diatas, kamu bisa memanggil margin dengan shorthand tanpa harus memanggil satu persatu margin property.

Susunannya:

margin:top_value right_value buttom_value left_value;

atau

margin:y_axis_value x_axis_value;

Kurang mengerti? Liat contohnya ya.

margin:10px 20px 30px 40px;

Penjelasan: Dari margin diatas, akan memberikan nilai margin-top = 10px, margin-right = 20px, margin-bottom = 30px, margin-left = 40px.

margin:10px 20px;

Penjelasan: Dari margin diatas, akan memberikan nilai:

  • margin top dan bottom = 10px;
  • margin left dan right = 20px;

Dengan menggunankan shorthand tentu kita bisa lebih sedikit mengetik dan membuat code css menjadi lebih simple.

Nah itulah pembahasan tentang properti margin dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang margin dalam css.

Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Tutorial CSS : Styling Text CSS

Bagaimana cara styling text dengan css. Styling text dalam css termasuk bagaimana cara memberikan warna pada text, text docaration, text transform dan lainnya.
Agus Yusida
5 min read 1984

Tutorial CSS : Membuat List di CSS

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
Agus Yusida
5 min read 2048

Tutorial CSS : Membuat Margin CSS

Margin CSS berfungsi untuk memberikan batas di luar sebuah elemen, di luar border dari sebuah elemen.
Agus Yusida
5 min read 2020

© 2024