margin,padding / display:

1. margin, padding

(1개 수치만 입력하면 전체, 2개는 위아래와 좌우, 4개는 위-오른쪽-아래-왼쪽 순서로 적용)

margin

border를 경계로 바깥 쪽 여백
magin auto: 가운데를 기준으로 상하와 좌우를 같게 하는 것이다. 
margin auto는 블록일 때는 위아래, 좌우에 적용되지만, 인라인 일때는 좌우에만 적용된다.
두 개 요소의 margin이 겹치면 둘 중 큰 값이 적용된다. (여백 상쇄)

padding

border를 경계로 안 쪽 여백

---

2. display: 

 

display: inline
display: inline이 지정된 요소는 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.
width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.

display: block
display: block이 지정된 요소는 앞뒤 줄바꿈이 들어가 한 줄을 모두 차지한다.
width, height, margin, padding 속성이 모두 반영된다.

display: inline-block
display: inline-block이 지정된 요소는 inline 요소처럼 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만,
block 요소처럼 width, height, margin, padding 속성이 모두 반영된다.

 

---

- 구역의 정확한 의미는 무엇일까? hr은 구역? 콘텐츠? 
- selector는 어디에 붙일 수 있을까? selector의 종류는? 
- 상위태그와 하위태그에 서로 다른 꾸미기를 하려면?