CSS 박스(box) 모델 - margin, padding, border

margin

• margin은 테두리 바깥에 있는 여백을 의미한다.

div {
  margin: 20px;					// 상,하,좌,우 20px의 바깥쪽 여백이 적용된다.
  margin: 20px 10px;			// 상,하 20px 좌,우 20px의 바깥쪽 여백이 적용된다.
  margin: 20px 10px 5px;		// 상 20px 좌,우 10px, 하 5px의 바깥쪽 여백이 적용된다.
  margin: 20px 10px 5px 3px;	// 상 20px 우 10px 하 5px 좌 3px의 바깥쪽 여백이 적용된다.
}

❗ Collapsing margin (마진 상쇄) 현상

• body안에 div의 위, 아래 마진이 body의 마진과 만나면 둘 중 큰 값의 마진으로 body에 적용된다.

• 처음엔 너무 헷갈렸는데 이 분의 velog를 읽고 마진 상쇄를 완벽 이해했다. 👉 CSS 마진 상쇄

ex)

html {
  background-color: cornflowerblue;
}
body {
  background-color: tomato;
  margin: 50px;
}
div {
  background-color: teal;
  width: 50px;
  height: 50px;
}

이 상태에서 div에 margin 30px씩을 주었다.

결과는 좌, 우에만 30px의 여백이 적용되었고 상, 하는 변한 것이 없다.

❓ 그렇다면 상, 하에 여백을 두고싶은데 방법이 없나

나같은 경우에는 body의 padding을 이용하여 여백을 적용한다.

자연스럽게 padding 파트로 넘어간다.

padding

• padding은 테두리 안에 있는 여백을 의미한다.

div {
  padding: 20px;				// 상,하,좌,우 20px의 안쪽 여백이 적용된다.
  padding: 20px 10px;			// 상,하 20px 좌,우 20px의 안쪽 여백이 적용된다.
  padding: 20px 10px 5px;		// 상 20px 좌,우 10px, 하 5px의 안쪽 여백이 적용된다.
  padding: 20px 10px 5px 3px;	// 상 20px 우 10px 하 5px 좌 3px의 안쪽 여백이 적용된다.
}

html {
  background-color: cornflowerblue;
}
body {
  background-color: tomato;
  margin: 50px;
  padding: 30px;
}
div {
  background-color: teal;
  width: 50px;
  height: 50px;
}

div에 margin을 주는 대신 body에 padding을 주어서 상, 하, 좌, 우 여백 20px를 적용이 가능하다.

border

• border는 Box의 경계선이다.

• border는 inline과 block 모두에게 적용된다.

div {
  background-color: tomato;
  border: 5px;				// 테두리의 너비
  border-style: solid; 		// 테두리의 스타일
  border-color: teal;		// 테두리의 색깔
}

또는

div {
  background-color: tomato;
  border: 5px solid teal;	// 테두리의 너비, 스타일, 색깔
}