서론

box-sizing, content-box border-box 차이에 대해서 검색하면 상위 노출 글에 잘못된 정보가 너무 많다. margin을 더하는 방식에 대해서 특히 잘못되거나 모호한 정보가 많아 정정하고자 정리해본다.

학습

box-sizing

CSS 속성 중 box-sizing은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정하는 것!

예시 코드 (img 태그)

{
	box-sizing: ?????????
	height: 100px;
    width: 100px;
    border: 10px solid;
    padding: 10px;
    margin: 10px;
}

예시 이미지는 크롬 개발자 도구의 스타일 박스로 가져왔다.

content-box

너비와 높이가 "content" 기준인 것!

중앙의 컨텐츠(이미지)를 100x100으로 기준을 잡고, 겉의 paddding, border, margin은 width, height에 영향을 받지 않고 쌓아진다. 따라서 padding, border, margin의 사이즈를 어떻게 주어도 이미지의 크기는 고정이 되고 겉으로만 사이즈가 커지게 된다.

예시에서는 padding, border, margin에 관계 없이 지정한 그대로 이미지의 사이즈는 100x100이다.

border-box

너비와 높이가 "border" 기준인 것!

border까지 포함된 사이즈를 100x100으로 기준을 잡고, 겉의 margin은 width나 height에 영향을 받지 않고 쌓아진다. 따라서 margin의 사이즈와 관계없이 이미지의 크기는 고정이 되고 겉으로만 사이즈가 커지게 되고, padding, border의 사이즈는 이미지의 크기에 영향을 주어 작아질 수 있다.

예시에서는 padding과 border를 각 10px씩 주었으므로 이미지의 사이즈가 60x60이 되었다.

결론

content-box : box-sizing 속성의 기본값

• width/height 지정 사이즈 = content 사이즈
• 전체 영역 사이즈: 지정 사이즈(width*height) + padding + border + margin

border-size

• width/height 지정 사이즈: content + padding + border
• content 사이즈: 지정 사이즈 - border - padding
• 전체 영역 사이즈: 지정 사이즈(width*height) + margin

** margin은 모든 박스 사이징의 지정 사이즈 및 content 사이즈에 영향을 주지 않는다! 단지 전체 영역 사이즈에만 영향을 줄 뿐!

MDN에서 직접 실습해보기

전체 스타일 코드에 box-sizing을 통일 시키고, 그에 맞춰 스타일을 구현하는 것을 권장한다.

나의 경우는 margin은 사이즈(테두리) 밖으로 생기고, padding은 지정한 사이즈 안쪽으로 차지해가는 형태가 자연스럽게 느껴져서, 항상 box-sizing: border-size;로 사용하곤 한다!