padding으로 알아보는 inline 요소의 특성, 부모 요소의 크기 변화

inline 요소에 margin을 적용할 때는 좌우 margin만 적용되고, 상하 margin은 적용되지 않는다.

그러나 padding을 적용할 때는 좌우 margin과 상하 margin 모두 적용된다. 이유는 inline 요소의 경우 하나의 line 내에서 수평적으로 배치되기 때문에 상하 margin이 적용되지 않으나, padding의 경우에는 요소의 실질적인 영역 자체를 늘리는 것이므로 상하 적용이 가능하다.

❓ padding은 상하좌우 모두 적용이 가능한데, 왜 width와 height은 상하좌우 모두 적용이 되지 않을까?

• inline 요소는 박스가 아니라 텍스트 흐름 단위이다.
  span, a, strong 같은 inline 요소는 문장 중간에 자연스럽게 녹아들어 배치된다. 브라우저는 inline 요소의 크기를 내용의 길이에 따라 자동으로 결정합니다. 따라서 너비(width)나 높이(height)를 지정하더라도 무시된다.
  
  
• padding은 예외적으로 적용된다.
  padding은 글자 주변에 여백을 더하는 개념이므로, inline 요소에도 적용할 수 있다.

하지만 부모 요소의 입장에서는 inline 자식 요소에 상하 padding을 주더라도, 그 요소만 공간이 늘어나지 부모의 높이(line box)는 여전히 자식 inline 요소의 텍스트 크기에 의해 결정된다.

따라서 부모 요소는 자식 요소가 inline 요소인 경우 수평 영역은 온전히 감싸지만, 수직 영역은 온전히 감싸지 못한다. 부모 요소가 자식 요소의 크기에 맞춰서 온전히 감싸도록 하려면 자식 요소를 inline-block이나 block 요소로 설정해야 한다.