[CSS] padding 사용 시, 부모 벗어나는 문제

 

padding을 사용하게 되면 간혹 해당 스타일을 부여한 요소가 부모요소를 벗어나는 상황이 발생하곤 한다.

 

 

타 블로그에서 원인에 대해 설명하는 바로는 다음과 같다.

자식 요소에 위치값이나 크기(%)를 주면,

부모를 벗어나는 경우가 있다.

 

- 부모 요소에 있는 padding 때문에

부모를 벗어날 수 있다.

이 부분을 해결하기 위해, padding을 부여한 자식 요소에 box-sizing: border-box; 속성을 추가로 부여한다면 간단히 문제를 해결할 수 있다.

 

이 게시글은 아래의 블로그 포스팅을 참고하여 작성되었다.

https://dewworld27.tistory.com/entry/padding-%EB%B6%80%EB%AA%A8-%EB%B2%97%EC%96%B4%EB%82%A8-%EC%82%AC%EC%9D%B4%EC%A6%88-%EB%B3%80%EA%B2%BD-%EB%AC%B8%EC%A0%9C%EB%A5%BC-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94-box-sizing

padding 부모 벗어남, 사이즈 변경 문제를 해결하는 box-sizing