[CSS] 부모요소의 padding 영향을 받지 않게 하기

.wrap-type1 { padding: 1.6rem; } 안에 요소를 하나만 제외시키고 싶을땐?

 

방법 1: margin을 이용한 보정

.wrap-type1 {
    padding: 1.6rem;
}

.wrap-type1 .exclude-padding {
    margin: -1.6rem;
}

 

방법 2: position: absolute 사용 (상황에 따라)

.wrap-type1 {
    position: relative;
    padding: 1.6rem;
}

.wrap-type1 .exclude-padding {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

 

방법 3: padding을 특정 요소에만 적용

.wrap-type1 {
    display: flex;
}

.wrap-type1 > *:not(.exclude-padding) {
    padding: 1.6rem;
}