[CSS] display:inline과 padding

 

 

display: inline속성의 특징을 다시 알아보면서 의문점이 생겼다.

 

inline요소는 text요소이기 때문에 width, height를 따로 지정할 수 없다,

그리고, 좌우 margin은 적용이 되지만 상하 margin은 적용이 안된다.

 

그럼 inline 요소는 padding top, bottom이 적용되는건가?

 

프로젝트 할 때 span에 padding적용이 잘 안되서 block으로 바꿨었던 기억도 있었고,

상하 margin, padding이 전부 안된다고 했던 글들이 봐왔어서 그 텍스트만 기억하고 안된다고 생각하고 있었었다.

 

그런데 갑자기 상하 padding이 된다는 글을 보게 되었고 확인하기로 했다.

 

<style>
  body {
    margin: 0;
  }
  .inline {
    background-color: red;
  }
  .padding {
    padding: 50px;
  }
</style>

<div>
  <span class="inline">inline</span>
  <span class="inline padding">inline + padding</span>
</div>

 

이렇게만 보면 padding-top만 적용되지 않는 것 처럼 보이지만

background를 빼면 상하 padding이 적용되지 않는 것처럼 보인다.

 

뭔가 반만 적용되는 느낌?

 

    <div>
      <div>block block</div>
      <div>block block</div>
      <div>block block</div>
      <div>block block</div>
      <div>block block</div>
      <span class="inline">inline</span>
      <span class="inline padding">inline + padding</span>
      <div>block block</div>
      <div>block block</div>
      <div>block block</div>
    </div>

상위에 요소들이 background만큼의 공간이 있도록 만들어 주면 padding-top만큼의 background가 나타나게되고

주변의 요소들과 겹치게된다. 어쨌든 padding의 영역을 지니고 있다.

 

어떻게 해석하면 padding이 적용이 안된다 라고도 생각할 수 있겠지만 적용이 되는 게 맞다!

 

 

✅결론

인라인 요소에 상단과 하단에 패딩이 적용되지만 다른 요소의 간격에 영향을 미치지 않는다.

하지만 패딩으로 인해 다른 요소와 겹친다.

 

MDN - Block and inline layout in normal flow

MDN에서도 좌우 여백만 안되고 패딩은 가능하다고 적혀있다.