[CSS] 자식요소를 부모요소의 padding 밖으로 꺼내기

 

 

부모에 padding값이 있을 경우

자식요소도 부모의 padding 안에 갇혀버리게 되어서

레이아웃을 구현할 때 wrapper를 나누어서 구현한 적이 많다.

 

위와 같이 레이아웃 전체를 padding으로 감싸고 어떠한 한 자식만

padding 바깥으로 늘리고 싶을 때 가 있는데 그럴 땐 아래와 같이 처리하면 된다.

 

parent { 
  width: 500px;
  height: 500px;
  padding: 0 20px;
}

child {
  margin-left: -20px;
  margin-right: -20px
}

 

* 바로 직속 자식요소에서만 반영이 된다.