CSS - display 속성 inline / block / inline-block 이란

 

display: inline

inline 속성은 텍스트 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. 

대표적인 태그는 <span> 이 있다. (텍스트 크기만큼만 공간을 계산하니 레이아웃 관련 속성은 적용이 안된다.)

• width / height  적용 불가
• margin / padding-top / bottom 적용 불가
• line-height 적용 불가

<a>, <button>,
<input>, <label>, <textarea>
<script>, <span>,  <img>,
<b>, <br/>,  <strong>,

 

display: block

block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 <div>가 있다.

• width, height, margin 등 layout 관련 속성 지정가능

<div>, <p>, <hr>
<h1> - <h6>
<header>, <footer>, <main>
<form>, <video>, <section> 
<table>, <ol>, <ul>, <li>

 

display: inline-block

inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다.

기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능)

inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다.

• width/height 적용 가능
• margin/padding-top/bottom 적용 가능
• line-height 적용 가능

 

 

 

ref: https://webruden.tistory.com/135