Margin ve padding
- React Native kursu
- Başlangıç
- Ders 33/116
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Card() {
return (
<View>
<Text>Kart</Text>
</View>
);
}
const styles = StyleSheet.create({
// card stilini buraya ekle
});Örnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İçerideki boşluğu hangi özellik verir?
<View style={{ ??? : 12 }}>
<Text>Merhaba</Text>
</View>- margin
- outer
- borderWidth
- padding Doğru cevap
Açıklama: padding içerideki boşluğu verir.
2 Üst boşluk özelliğini yaz
styles = StyleSheet.create({
card: {____: 16, padding: 8 }
});styles = StyleSheet.create({
card: {paddingTop: 16, padding: 8 }
});Açıklama: paddingTop üst kenardaki boşluğu ayarlar.
3 Özelliği yönüne eşle
| Kavram | Anlamı |
|---|---|
paddingTop |
Üst iç boşluk |
marginBottom |
Alt dış boşluk |
paddingHorizontal |
Sol ve sağ iç boşluk |
margin |
Tüm dış kenarlar |