[HTML & CSS] box-sizing과 padding의 관계

[box-sizing]

• box-sizing은 도형의 테두리(border)를 안에 그릴지 밖에 그릴지를 정하는 속성이다.
• box-sizing의 기본 속성은 content-box로 도형 밖에 그려진다.
• 디자인 상 outside 즉, 밖에 테두리를 그리는 속성은 box-sizing: content-box; 이다.
• 디자인 상 inside 즉, 안에 테두리를 그리는 속성은 box-sizing: border-box; 이다.
• 웹 디자이너는 한가지 가이드라인을 만들어서 통일성있게 디자인을 하는 것이 좋다.
• 구현하는 개발자는 구현하기 전에 한번씩 확인 후 개발을 하는 것이 좋다.
• 너비, 높이가 200px에 border의 두께를 1px를 준다고 가정했을 때, box-sizing: border-box;를 적용하면 박스(도형)의 크기는 200px이 아닌 198px이 된다. (테두리가 안으로 그려지기 때문에, 테두리를 포함해서 200px이 된다.)

See the Pen box-sizing by psm817 (@psm817) on CodePen.

 

 

[box-sizing과 padding의 관계]

.box {
     border: 1px solid red;
     width: 100px; height: 100px;
     padding: 5px;
     box-sizing: border-box;
}
.padding {
     height: 100%;
     background-color: blue;
}

 

• 위 css는 너비,높이가 100px인 box 클래스에 1px짜리 테두리를 추가하고 안쪽 여백(padding)을 5px씩 주었다.
• box의 하위엘리먼트로 padding 클래스에는 높이를 100% 상속받는 박스를 하나 추가하였다. (block 속성은 너비를 자동으로 100% 상속받기 때문에 따로 수치를 고정시키지는 않음)

 

• 여백(padding)과 box-sizing을 적용하기 전 box 클래스의 너비 높이는 102 x 102px이고, padding 클래스의 너비 높이는 총 100 x 100px이다.
• box 클래스의 너비 높이가 102px인 이유는 border가 상하좌우로 1px씩 지정해놨기 때문이고, box-sizing의 기본 속성 content-box로 설정되어 있기 때문에 padding 클래스의 너비 높이에는 영향을 미치지 않는다.

 

• 여백(padding)을 5px씩 상하좌우 적용하게 되면 box 클래스의 너비 높이는 112 x 112px이고, padding 클래스의 너비 높이는 총 100 x 100px이다.
• box 클래스의 너비 높이가 112px인 이유는 여백(padding)이 상하좌우로 5px씩 지정하고, border가 상하좌우로 1px씩 지정해놨기 때문에 100+5+5+1+1 = 112px이고, box-sizing의 기본 속성은 그대로이기 때문에 padding 클래스의 너비 높이는 여전히 100px이다.

 

• 여백(padding)과 box-sizing: border-box;를 둘 다 적용하게 되면 box 클래스의 너비 높이는 100 x 100px 이고, padding 클래스의 너비 높이는 총 86 x 86px이다.
• box 클래스의 너비 높이가 100px인 이유는 box-sizing: border-box로 작성하여 테두리를 안쪽에 적용하였기 때문에 기존 102px에서 상하좌우 1px씩 차감하였기 때문이고, box-sizing을 border-box로 지정하였기 때문에 padding 클래스의 너비 높이는 여백(padding) 5px씩과 테두리(border)를 포함하여 100-5-5-1-1 = 88px이 된다. 

 

• 다시 말해 box-sizing: border를 쓰면 너비 높이 안에 padding이 포함되어 계산된다.
• padding 여백을 포함한 박스의 높이는 하위 엘리먼트에 100% 상속되기 때문에 하위 엘리먼트에서 높이의 수치를 고정값이 아닌 100% 수치를 활용해서 코드를 구현하는 것이 헷갈리지 않는다.

See the Pen box-sizing과 padding by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 10일차 복습 by psm817 (@psm817) on CodePen.