CSS Box model

CSS Box model

모든 HTML 요소는 box 형태로 되어있다.

하나의 박스는 네 부분의 영역으로 이루어져 있다.

• margin
• border
• padding
• content

 

Margin

• 테두리 바깥의 외부 여백
• 배경색을 지정할 수 없다.

.margin{
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 30px;
	margin-left: 40px;
}

.margin-1{
	margin:10px;
	/* 상하좌우 모두 10px */
}

.margin-2{
	margin:10px20px;
	/* 상하 / 좌우 */
}

.margin-3{
	margin:10px20px30px;
	/* 상 / 좌우 / 하 */
}

.margin-4{
	margin:10px20px30px40px;
	/* 상 / 우 / 하 / 좌 */
}

 

Border

• 테두리 영역

.border{
	border-width:2px;
	border-style:dashed;
	border-color:black;
}

.border{
	border:2px dashed black;
	/* 순서 상관없다. */
}

 

Padding

• 테두리 안쪽의 내부 여백
• 요소에 적용된 배경색
• 이미지는 padding까지 적용

.margin-padding{
	margin:10px;
	/* 상하좌우 모두 10px */
	padding:30px;
}

 

Content

• 글이나 이미지 등 요소의 실제 내용

 

Box-sizing

• 기본적으로 모든 요소의 box-sizing은 content-box
  • Padding을 제외한 순수 content 영역만을 box로 지정
• 다만, 우리가 일반적으로 영역을 볼 때는 border까지의 너비를 100px 보는 것을 원한다.
  • 그 경우 box-sizing을 border-box로 설정

 

* 마진 상쇄

• block A의 top과 block B의 bottom에 적용된 각각의 margin이,
• 둘 중에서 큰 마진 값으로 결합(겹쳐지게)되는 현상