盒模型与外边距确认

width: 300px; padding: 20px; border: 1px solid 인 요소가 기본 box-sizing 에서 차지하는 가로는?

• 300px — width 가 상자 전체를 가리킨다
• 320px — padding 한쪽만 더해진다
• 342px — content 300 에 좌우 패딩과 경계선이 더해진다
• 258px — padding 과 border 가 안쪽에서 깎인다

위 요소에 margin-bottom: 20px, 아래 형제에 margin-top: 30px 을 주면 둘 사이 간격은?

• 50px — 두 여백이 더해진다
• 25px — 두 값의 평균이 된다
• 20px — 먼저 선언된 쪽이 이긴다
• 30px — 두 여백이 합쳐져 큰 값 하나가 된다

자식에 margin-top 을 줬는데 부모 상자가 통째로 아래로 밀립니다. 멈추는 방법이 아닌 것은?

• 자식의 margin-top 을 음수 값으로 상쇄시킨다
• 부모에 padding-top 을 준다
• 부모에 border-top 을 준다
• 부모에 display: flow-root 를 준다

padding-top: 50% 는 무엇의 50% 입니까?

• 요소 자신의 높이
• 담음 블록의 폭
• 담음 블록의 높이
• 뷰포트의 높이

width: 100%; max-width: 640px 인 요소의 폭은 어떻게 정해집니까?

• 둘이 충돌해 width 가 무시되고 640px 로 고정된다
• 부모가 640px 보다 크면 width 가 이겨 부모 폭을 따른다
• 부모 폭을 따르되 640px 을 넘으면 640px 에서 멈춘다
• 브라우저가 둘의 평균값을 계산해 적용한다

flex 컨테이너에 gap 을 쓰는 것이 margin 보다 나은 이유는?

• gap 은 여백 상쇄가 일어나 값이 두 배로 커지지 않는다
• gap 은 아이템마다 다른 값을 줄 수 있어 세밀하게 조정된다
• gap 은 box-sizing 설정과 무관하게 width 에 포함된다
• gap 은 아이템 사이에만 들어가 마지막 여백을 지우는 규칙이 필요 없다