컨텐츠를 하나로 했을때는 margin 개념은 디바이스와 컨텐츠 사이의 간격으로 이해 했어요

근데 컨텐츠를 하나더 만들어서 margin을 바꿔보니 음?? 왜 첫번째컨텐츠의 padding사이즈가 같이변경되는거지? 싶더라구요

제가 개념을 잘못이해한걸까요?

작성한 코드 및 에러 메세지

import React from 'react';

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

export default function App() {

  return (

    <View style={styles.container}>

      <View style={styles.containerONE}>

      <View style={styles.textContainer}>

        <Text style={styles.textStyle}>스파</Text>

        </View>

        <View style={styles.textContainerONE}>

        <Text style={styles.textstyleONE}>힝구</Text>

      </View>

      </View>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: 'blue',

    justifyContent:"flex-start",

    alignContent:"center"

  },

  containerONE: {

    flexDirection: "row",

  },

  textContainer: {

    margin:10,

    padding: 10,

    borderRadius:10,

    borderWidth:2,

    borderColor:"pink",

    borderStyle:"solid",

    backgroundColor:"green"

  },

    textContainerONE: {

    margin: 100,

    padding: 10,

    borderRadius:10,

    borderWidth:2,

    borderColor:"green",

    borderStyle:"solid",

  },

  textStyle: {

    color:"red",

    fontSize:20,

    fontWeight:"700",

    textAlign:"center"

  },

  textstyleONE:{

   color: "red",

   fontSize: 20,

   fontWeight: "700",

  },

});