[Ionic-React] CSS 부모의 패딩 속성 무시하기

1. 개요

부모 요소에 꽉 찬 화면 기준으로 패딩이 16px 지정되어 있다.

자식 요소는 부모 요소의 패딩을 무시하고 꽉 찬 화면을 유지하고 싶다.

2.코드 상세

• 부모 요소 속성 무시 적용 전 코드

현재 부모 요소에 패딩이 16px로 지정되어 있어 자식요소 또한 동일한 패딩값을 가지고 있다.

// Home.tsx (부모요소)
function Home() {
  return (
    <IonPage>
      <IonContent className="ion-padding">
        <HomeHeader />
        <SearchBar />
        <SlideSection />
        <Travelog />
      </IonContent>
    </IonPage>
  );
}

//SlideSection.tsx (자식요소)
const SlideSection = () => (
  <div>
    ...
  </div>
);

export default SlideSection;

 

• 부모 요소 속성 무시 적용 후 코드

부모 요소의 패딩값을 무시하고 자식요소는 꽉 찬 화면을 유지하고 있다.

//SlideSection.tsx (자식요소)
const SlideSection = () => (
  <div style={{ margin: '0 -16px 0 -16px' }}>
    ...
  </div>
);

export default SlideSection;

부모요소의 패딩 값 만큼 자식요소에 마진값을 동일한 값으로 지정한다면 부모요소의 속성을 무시할 수 있다.