📌 박스모델 크기

• width, height 인라인 요소들은 가로,세로 지정해줘도 안먹음

🍍 min-width

• 최소너비 지정
• 뷰포트를 아무리 줄여도 min-width 보다는 줄어들지가 않음
• 반응형사이트를 만들때 유용
• min(), max() 보다 더 폭 넓게 사용가능해서 이거를 사용하는 걸 추천

min-width:300px;

• 화면을 줄이다가 300px이 되는 순간부터는 더이상 줄어들지 않음

🍍 max-width

• 최대너비 지정
• 뷰포트를 아무리 늘려도 max-width 보다는 늘어나지가 않음

🍍 min-height

• 최소높이 지정
• 뷰포트를 아무리 줄여도 min-height 보다는 줄어들지가 않음

🍍 max-height

• 최대높이 지정
• 뷰포트를 아무리 늘려도 max-height 보다는 늘어나지가 않음

📌 박스모델 여백

🍍 margin

• 단축속성
• top, right, bottom, left
• %를 쓸 경우 부모의 width의 30% 이렇게 여백이 들어감

🍍 margin-callapsing

• 좌우margin은 합쳐지지 않음
  

2. 부모-자식요소 간

• 부모와 자식을 끊어줄 수 있는 요소가 단 1px이라도 있으면 콜랩싱은 일어나지 않음
• padding이나 border가 없으면 margin이 상쇄되고, 둘중 하나라도 있으면 상쇄되지 않음
  

3.빈 블록

• 내용이 없는 요소에 발생
• 자기 자신의 margin-top과 자기 자신의 margin-bottom이 상쇄됨

🍍 padding

• margin은 음수값을 사용할 수 있지만 padding은 음수값 사용X
• %를 쓸 경우 부모의 width의 30% 이렇게 여백이 들어감

padding-top:30%;

• 이 경우 부모의 세로길이의 30%가 아니라 무조건 퍼센트는 가로길이의 퍼센트임