CSS 박스 모델

※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음.

 

 

직접 그린 CSS 박스 모델

Margin

테두리(border) 바깥의 외부 여백 영영으로, 기본적으로 투명하며 배경색을 지정할 수 없다.

 

p {
margin : 1px 2px 3px 4px;
}

왼쪽부터 위, 오른쪽 아래, 왼쪽으로 시계방향으로 기억하면 쉬움

 

p {
margin : 1px 2px;
}

값이 두 개만 있을 때는 왼쪽이 상하, 오른쪽이 좌우임

 

p {
margin : 1px;
}

값이 하나만 있을 때는 모든 영역이 동일하게 적용

 

p {
margin-top : 1px;
margin-right : 1px;
margin-bottom : 1px;
margin-left : 1px;
}

이런 식으로도 표현 가능

 

{
margin-top : -1px;
}

음수 값도 넣을 수 있음(다른 요소와 겹치게 되거나 화면에서 사라질 수 있음)

 

Padding

위와 동일

 

 

content-box와 border-box

content-box

css의 width와 height를 콘텐츠 영역에만 적용하여 전체 영역의 크기는 border, padding 값을 더해야 하므로 개발자가 정한 설정값보다 커질 수 있다.

border-box

css 의 width와 height를 전체 영역에 적용하여 전체 영역의 크기는 border, padding을 포함한 크기로 계산된다.

 

* {
	box-sizing : border-box;
	
}

  위처럼 일반적으로 전체 요소에 border-box를 적용하여 레이아웃을 통일시킨다. 그렇지 않으면 레이아웃마다 계산이 달라져 혼란스러울 수 있다.