개발자 도구에서 header의 콘텐츠를 보면 view today’s challenge는 header가 아닌 앵커 태그의 콘텐츠임을 알 수 있다.
이는 인라인 요소의 경우 패딩 상단 혹은 하단, 여백의 경우 상단 또는 하단에 이를 적용할 때 특정 규칙을 따라야 하기 때문이다.
a {
margin: 30px 0;
}
과 같이 상하 여백을 지정해도 페이지 상에는 아무런 변화도 없음.
a {
margin: 30px 12px;
}
일 경우 좌우에만 12픽셀이 적용된다.
에서 앵커태그의 패딩을 변화시키면
padding: 12px 48px; -> padding: 38px;
위의 단락이 겹쳐져 버린다.
그러므로 이를 해결하기 위해서는 display속성을 추가하면 된다
a {
display: inline-block;
}
속성값으로 inline-block을 주면 이전에는 불가능하던 여백과 패딩을 지정하여 header요소의 콘텐츠가 모든 요소를 포함하는 곳에서 끝나는 것을 볼 수 있다.
이제 위/아래쪽의 여백을 추가할 수 있고, 패딩이 다른 요소들과의 거리에 영향을 주게 된다.