인라인 요소에 padding, margin이 적용될까?

인라인 요소에는 박스 모델에 적용되는 width나 height과 같은 CSS 속성을 적용할 수 없다. 그래서 padding, margin 같은 속성도 붙일 수 없다고 생각했었는데 알고 보니 사실이 아니었다. padding과 margin을 좌우에만 적용할 수 있다는 글을 보았다. 과연 팩트일지 테스트를 해보려 한다.

 

인라인 요소에 패딩 적용하기

paddig 5px

패딩이 잘 먹는다

예상과 달리, 좌우뿐만 아니라 상하로도 잘 적용된다.

 

인라인 요소에 마진 적용하기

그렇다면 마진은 어떨까?

margin 5px

적용이 잘 된것처럼 보인다

그러나 자세히 보면,

 

인라인 요소에서 margin은 좌우로만 적용된다.

 

결론

인라인 요소에 패딩을 적용할 수 있다. 마진은 좌우로만 적용된다.