CSS Box Model(margin, padding, border, contents)

1. CSS Box Model

CSS Box Model은 HTML 요소의 디자인과 레이아웃을 말할 때 사용한다.

<div class="box-model">content</div>

.box-model {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 10px 20px 30px 40px;
  padding: 40px 30px 20px 10px;
  border: 1px solid black;
  /* border: 2px dashed red; */
  /* border: 3px dotted blue; */
  /* border: 4px double green; */
}

• content(파란색 영역): Text 등 Content가 들어가는 영역
• padding(초록색 영역): border(외곽선)를 기준으로 내부 여백 공간
• border(노란색 부분): 요소의 외곽선 영역
• margin(주황색 부분): border(외곽선)를 기준으로 외부 여백 공간
  • margin과 padding의 px 지정은 위, 오른쪽, 아래, 왼쪽으로 설정
  • px를 1개만 지정해 줄 경우 상하좌우 동일
  • 2개 지정할 경우 상하 좌우
  • 3개 지정할 경우 상 좌우 하

2. border-radius

외곽선 각 모서리를 깎을 수 있으며, 원을 만들 수 있다.

.box-model {
  width: 200px;
  height: 200px;
  background-color: aqua;
  border-radius: 100px;
}

3. box-sizing

width, height 지정 시 기본적으로 Content 부분의 영역만 지정하게 된다.

.box-model {
  width: 200px;
  height: 200px;
  padding: 50px 50px;
  margin: 50px 50px;
  border: 5px solid black;
  background-color: aqua;
}

content 영역만 가로세로 200px

 

box-sizing 속성을 사용해 주면 Box Model 모든 값을 합쳐 가로, 세로 200px로 맞추어 준다.

.box-model {
  width: 200px;
  height: 200px;
  padding: 50px 50px;
  margin: 50px 50px;
  border: 5px solid black;
  background-color: aqua;
  box-sizing: border-box;
}