[CSS] display: inline과 display:inline-block의 차이점

🗒 비슷한듯 비슷하지 않은 두 속성을 살펴보자

📌 정리

display: inline 과 display: inline-block은 기능면에선 동일하지만, 기능이 적용되는 범위에 있어선 차이를 보인다!

기능❓ block 태그를 inline 태그로 변경함

동일한 조건으로 속성값을 설정한 뒤 비교해본 결과

<!-- html -->
<span>Dummy</span>
  <div class="box1">
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
  </div>
<span>Dummy</span>

/* CSS */
.box1 { 
      background-color: #f00;
      width: 300px;
      height: 200px;
      margin: 100px;
      padding: 20px;
    }

📌 1) display: inline

• width, heigth가 적용되지 않음
• margin은 좌우만 적용됨
• padding은 모두 적용됨

📌 2) display: inline-block

• width, height, margin, padding 모두 적용됨

따라서 조건이 까다로운 inline 속성보다는 inline-block 속성을 쓰는 것이 더 낫겠다

📚 Reference

: 국비지원 수업