CSS3-박스 크기

상자 크기 조정 속성은 요소의 높이와 너비를 변경하는 데 사용됩니다.

css2 이후로 box 속성은 아래와 같이 작동했습니다.

너비 + 패딩 + 테두리 = 요소 상자의 실제 표시 / 렌더 된 너비

높이 + 패딩 + 테두리 = 요소 상자의 실제 표시 / 렌더링 된 높이

높이와 너비를 설정할 때 주어진 크기보다 약간 더 크게 나타나 요소의 높이와 너비에 요소 보더와 패딩이 추가됨을 의미합니다.

CSS2 크기 조정 속성

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

다음 결과가 생성됩니다-

위의 이미지는 두 요소의 너비와 높이가 같지만 결과가 다르기 때문에 두 번째 이미지에는 패딩 속성이 포함되어 있습니다.

CSS3 상자 크기 조정 속성

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

위의 샘플은 높이와 너비가 동일합니다. box-sizing:border-box. 여기 결과는 아래와 같습니다.

다음 결과가 생성됩니다-

위의 요소는 box-sizing : border-box와 동일한 높이와 너비를 가지므로 위와 같이 두 요소의 결과는 항상 동일합니다.