[CSS] display 속성 : inline , block , inline-block 차이점

display 속성

웹페이지 위에서 엘리먼트들이 어떻게 보여지고, 다른 엘리먼트들과 어떻게 상호 배치되는지 결정하는 속성

---

 

• inline : 줄바꿈 X. 한줄에 다른 엘리먼트들과 나란히 배치  ex) <span> , <a> , <em> 등의 태그가 이 속성을 가지고 있다.

주의할점 : width 와 height 속성을 지정해도 무시된다. margin 과 padding 도 좌우만 반영되고 상하는 반영 X

 

• block : 줄바꿈 O. ex) <div> , <p> , <h1> 등의 태그가 이 속성을 가지고 있다.

 

• inline-block : 기본적으로 inline 엘리먼트처럼 줄바꿈 X. 한줄에 다른 엘리먼트들과 나란히 배치 ! BUT width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해짐    ex) <button> , <select>