박스모델(box-modal)

HTML/CSS에서 요소는 기본적으로 박스 형태이다. 밖에서부터 차례대로 바깥 여백(마진, margin), 테두리(보더, border), 테두리와 실제 내용 사이의 여백(패딩, padding), 그리고 실제 내용이 들어가는 콘텐트 박스(content box)가 있다.

 

■ 속성

padding / margin : 세로는 겹친다. 원하는 대로 안 나올 경우 '상쇄'를 의심해보자.

마진 상쇄 (Margin Collapsing) : 일반적으로 세로 마진은 서로 겹쳐서 화면에 나타난다. 서로 이웃한 태그에서는 세로로 마진을 겹쳐서 작용하고, 부모 자식인 관계인 태그에서도 세로로 마진을 겹쳐서 적용한다. 이때 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않는다.

border : radius

box-sizing : border-content / border-box