요소 바깥쪽 간격과 auto 중앙 정렬을 이해합니다.
margin은 테두리 밖에서 다른 요소와 거리를 만듭니다. 좌우 auto와 명시적 width를 함께 쓰면 블록을 가운데 둘 수 있으며 세로 margin은 조건에 따라 겹칠 수 있습니다.
이번 예제의 출발점은 margin: top right bottom left;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 margin 값을 10px 30px로 바꾸고 방향을 설명하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
margin으로 요소 내부 공간을 만들면 배경과 클릭 영역이 늘어나지 않습니다. 내부는 padding입니다.
직접 바꿔보세요margin 값을 10px 30px로 바꾸고 방향을 설명하세요.