CSS에서 패딩 속성이 너비 또는 높이를 변하게 하지 못하게 하는 한가지 방법

---

 

 

이번 글을 통해 배워갈 내용

1. CSS Padding 값을 넣으면서 공간 크기를 유지하고 싶은 경우

 

 

---

CSS에서 Padding 값을 넣을 때 공간 차지하지 않게 하는 법에 대해서 알아보겠습니다.

 

 

300px 너비의 div 안에 좌우 50px의 패딩을 주었는데 보시는 것과 같이

400px이 되었습니다. 

 

 

 

아래와 같이 300px 그대로 적용하고

패딩값이 부모의 크기에 영향을 주고 싶지 않다면

 

 

아래와 같은 속성을 넣어주면 됩니다.

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

 

 

---

읽어주셔서 감사합니다 좋은 하루 보내세요~

 

 

 

 

출처 및 인용

https://stackoverflow.com/questions/779434/how-do-i-prevent-the-padding-property-from-changing-width-or-height-in-css

How do I prevent the padding property from changing width or height in CSS?

 

---