[HTML/CSS] margin, padding, border

• margin : 컨텐츠의 border로부터 바깥에 있는 공간

margin 값을 줄 때는 top, botton, left, right를 각각 따로 설정할 수 있지만, 간편히 할 때에는 두개의 값을 넣고 상하 / 좌우로 줄 수 있고, 네 개의 값을 넣고 시계방향으로 상, 우, 하, 좌의 값을 줄 수 있다.

body {
	margin: 20px 30px;
}
body {
	margin: 20px 30px 10px 15px;
}

• padding : border로부터 안쪽의 공간
• border : margin과 padding의 경계, inline도 border를 가질 수 있다.
• margin-collapsing : 컨텐츠가 여백과 만나게 되면서, 각각의 마진이 합쳐지고, 이 마진이 body의 마진에도 통합되어 영향을 미치는 현상
• inline의 경우 padding은 가질 수 있지만, margin은 좌우로만 가질 수 있다. inline은 기본적으로 높이와 너비가 없기 때문, margin이 필요하다면 block으로 바꾸자.