[html] CSS박스 모델

 

 

HTML 태그들은 모두 이 박스를 가지고 있다.

 

F12를 눌러서 Elements 탭을 가서 Styles 탭을 보면 이 그림이 나옵니다. position margin, border, padding content 순입니다.(position은 없을 수도 있습니다.)

 

 

content

 

보통 태그가 차지하는 공간이 content입니다. 

 

 

결과

 

 

padding

 

패딩을 추가해본다

 

 

 

 

padding에 10px를 주면 상하좌우 모두 10px의 패딩이 추가됩니다.

만약에 오른쪽에만 패딩을 주고 싶다면 padding-right: 10px; 또는 padding:0 10px 0 0; d; 이렇게 해도 됩니다.숫자를 네 번 연달아 썼는데 순서대로 위 오른쪽 아래 왼쪽(top right bottom left) 순섭니다.

 

px는 픽셀입니다. 화면에 찍을 수 있는 가장 작은 점이 1px입니다. 그 점을 10개만큼 나란히 찍을 수 있는 거리가 10px인거죠. 모니터가 1920*1080라는 거 많이 보셨죠? 이 때의 단위도 px입니다. 가로에 1920개의 픽셀, 세로에 1080개의 픽셀이 있다는 뜻이죠.

 

가끔 내용이 너무 길어졌을 때 스크롤바가 생기는 것을 본적이 있을것이다. 스크롤바는 padding 공간 안에 생성됩니다.

 

 

border

 

border은 테두리입니다. padding이 없어도 border는 있을 수 있기 때문에 굳이 padding을 넣지 않아도 된다.

 

 

 

주의해야 할 점은 padding과 border 모두 width에 포함되지 않습니다. 이것 때문에 헷갈리는 일이 생길수도 있습니다.

만약 width가 50px, height가 30px이고 padding이 10px, border가 10px이면 총 width는 90(50+20+20)px, height는

70(30+20+20)px가 됩니다. 이유는 좌우 또는 상하에 padding과 border가 각각 있기 때문입니다.

만약 매번 이렇게 계산하는 것이 싫다면 box-sizing: border-box를 주면 됩니다. 그러면 width와 height는 content의 너비가 아니라 border까지 포함한 태그의 너비가 됩니다. 기본적으로는 box-sizing: content-box입니다.

 

margin

 

margin은 다른 태그와의 거리를 나타냅니다. box-sizing이 border-box 이건 content-box이건 width에는 포함되지 않습니다.

 

 

 

 

정리

1. 태그에는 content, padding, border, margin이 있다.
2. 위 오른쪽 아래 왼쪽 순으로 속성값을 꺼주면 된다.(따로따로 써도 된다.)
3. padding과 border, margin은 width에 포함되지 않는다. (box-sizing: border-box이면 margin만 미포함)