블록 요소와 인라인 요소의 스타일 차이

개발자 도구에서 header의 콘텐츠를 보면 view today’s challenge는 header가 아닌 앵커 태그의 콘텐츠임을 알 수 있다.

이는 인라인 요소의 경우 패딩 상단 혹은 하단, 여백의 경우 상단 또는 하단에 이를 적용할 때 특정 규칙을 따라야 하기 때문이다.

1. 여백
   인라인 요소는 왼쪽과 오른쪽에만 여백을 추가할 수 있다.

a {
  margin: 30px 0;
}

과 같이 상하 여백을 지정해도 페이지 상에는 아무런 변화도 없음.

a {
  margin: 30px 12px;
}

일 경우 좌우에만 12픽셀이 적용된다.

2. 패딩
   인라인 요소는 위와 아래에 패딩을 추가할 수 있다. 하지만 다른 요소의 패딩과는 다르게 인라인 요소의 패딩은 다른 요소와의 거리에 영향을 주지 않는다. 즉 다른 요소를 밀지 않는다.
   

에서 앵커태그의 패딩을 변화시키면

padding: 12px 48px; -> padding: 38px;

위의 단락이 겹쳐져 버린다.

그러므로 이를 해결하기 위해서는 display속성을 추가하면 된다

a {
  display: inline-block;
}

속성값으로 inline-block을 주면 이전에는 불가능하던 여백과 패딩을 지정하여 header요소의 콘텐츠가 모든 요소를 포함하는 곳에서 끝나는 것을 볼 수 있다.

이제 위/아래쪽의 여백을 추가할 수 있고, 패딩이 다른 요소들과의 거리에 영향을 주게 된다.