Margin ve padding

margin ve padding ile boşluk öğrenirsin.

margin ve padding

Boşluk iki özellikle verilir. padding bileşenin iç kenarıyla içerik arasındaki boşluğu, margin bileşenin dış kenarıyla komşuları arasındaki boşluğu belirler. İkisi de piksel sayısı alır.

Kolon örneği: bir View içine <Text>Merhaba</Text> koyduğunda padding: 12 metnin kutu kenarından 12 piksel içeride olmasını sağlar. margin: 12 ise kutunun kendisinin komşularından 12 piksel uzakta durmasını sağlar. İçerideki boşluk için padding, dışarıdaki boşluk için margin kullanılır.

Uygulama Boşluklu kart yaz

Boş StyleSheet.create bloğunu doldur. card adında stil tanımla: padding: 16 ve margin: 8. Bileşen <View style={styles.card}><Text>Kart</Text></View> döndürsün.

Örnek çözümü göster

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function Card() {
  return (
    <View style={styles.card}>
      <Text>Kart</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, margin: 8 }
});

Yönlü boşluk

Tek bir padding dört kenara da uygulanır. Yalnızca bir kenarı boşluklamak için yön ekleri kullanılır: paddingTop, paddingBottom, paddingLeft, paddingRight. Aynısı margin için de geçerlidir: marginTop, marginBottom vb.

Yatay ve dikey için kısa yoktur; paddingHorizontal sol ve sağ, paddingVertical üst ve alt boşluğu aynı anda verir. Bu özellikler CSS'te yoktur, React Native'e özeldir. Önce tüm kenarları padding: 12 ile ayarla, sonra özel bir kenarı değiştirmek için yön ekini kullan.

Kendini test et

İçerideki boşluğu hangi özellik verir?
```
<View style={{ ??? : 12 }}>
  <Text>Merhaba</Text>
</View>
```
- margin
- outer
- borderWidth
- padding
Cevabı göster

padding — padding içerideki boşluğu verir.

Üst boşluk özelliğini yaz

styles = StyleSheet.create({
  card: {____: 16, padding: 8 }
});

Cevabı göster

styles = StyleSheet.create({
  card: {paddingTop: 16, padding: 8 }
});

Özelliği yönüne eşle

paddingTop

Üst iç boşluk
marginBottom

Alt dış boşluk
paddingHorizontal

Sol ve sağ iç boşluk
margin

Tüm dış kenarlar

Sıradaki ders: border

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler