Bagikan melalui

Margin dan Padding

  • Artikel

Properti Margin dan Padding mengontrol perilaku tata letak saat elemen dirender di antarmuka pengguna. Artikel ini menunjukkan perbedaan antara dua properti, dan cara mengaturnya.

Gambaran Umum

Margin dan padding adalah konsep tata letak terkait:

  • Properti Margin mewakili jarak antara elemen dan elemen yang berdekatan, dan digunakan untuk mengontrol posisi penyajian elemen, dan posisi penyajian tetangganya. Margin nilai dapat ditentukan pada tata letak dan melihat kelas.
  • Properti Padding mewakili jarak antara elemen dan elemen turunannya, dan digunakan untuk memisahkan kontrol dari kontennya sendiri. Padding nilai dapat ditentukan pada kelas tata letak .

Diagram berikut mengilustrasikan dua konsep:

Margins and Padding Concepts

Perhatikan bahwa Margin nilai bersifat aditif. Oleh karena itu, jika dua elemen yang berdekatan menentukan margin 20 piksel, jarak antara elemen akan menjadi 40 piksel. Selain itu, margin dan padding bersifat aditif ketika keduanya diterapkan, di mana jarak antara elemen dan konten apa pun akan menjadi margin ditambah padding.

Menentukan Ketebalan

Properti Margin dan Padding keduanya berjenis Thickness. Ada tiga kemungkinan saat membuat Thickness struktur:

  • Buat struktur yang Thickness ditentukan oleh satu nilai seragam. Nilai tunggal diterapkan ke sisi kiri, atas, kanan, dan bawah elemen.
  • Buat struktur yang Thickness ditentukan oleh nilai horizontal dan vertikal. Nilai horizontal diterapkan secara simetris ke sisi kiri dan kanan elemen, dengan nilai vertikal diterapkan secara simetris ke sisi atas dan bawah elemen.
  • Buat struktur yang Thickness ditentukan oleh empat nilai berbeda yang diterapkan ke sisi kiri, atas, kanan, dan bawah elemen.

Contoh kode XAML berikut menunjukkan ketiga kemungkinan:

<StackLayout Padding="0,20,0,0">
  <Label Text="Xamarin.Forms" Margin="20" />
  <Label Text="Xamarin.iOS" Margin="10, 15" />
  <Label Text="Xamarin.Android" Margin="0, 20, 15, 5" />
</StackLayout>

Kode C# yang setara ditampilkan dalam contoh kode berikut:

var stackLayout = new StackLayout {
  Padding = new Thickness(0,20,0,0),
  Children = {
    new Label { Text = "Xamarin.Forms", Margin = new Thickness (20) },
    new Label { Text = "Xamarin.iOS", Margin = new Thickness (10, 25) },
    new Label { Text = "Xamarin.Android", Margin = new Thickness (0, 20, 15, 5) }
  }
};

Catatan

Thickness nilai bisa negatif, yang biasanya mengklip atau menguraikan konten.

Ringkasan

Artikel ini menunjukkan perbedaan antara Margin properti dan Padding , dan cara mengaturnya. Properti mengontrol perilaku tata letak saat elemen dirender di antarmuka pengguna.