CSS -box model

1. css(box model)

h1 {
 border: 5px red solid;
 padding: 50px;
 margin: 50px;
 }

margin, padding: 5px;
margin, padding: 5px 3px;
margin, padding: 5px 3px 2px;
margin, padding: 5px 3px 2px 1px;

한 개의 값은 모든 네 면의 여백을 설정합니다.
두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)


2. block vs inline

h1, p, div 등의 tag는 block 디스플레이 입니다.
a, span, em, strong, img 등의 tag는 inline 디스플레이 입니다.

다른 tag의 디스플레이 유형은 검색과 코딩을 통해서 확인.

3. 마진 상쇄(Margin collapsing) 현상

블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동
-MDN