((CSS)) display속성의 block,inline,inline-block의 차이점

* display 속성

display : block

- 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다.

- 가로 전체를 모두 차지하는 태그다.

- Inline요소를 Block요소처럼 변경하고 싶을 때 display:block; 을 사용한다.

- <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등은 block 요소다.

 

display : Inline 요소

- 요소끼리 서로 한 줄에, 바로 옆에 사이좋게 위치할 수 있다.

- 태그안의 content 내용만큼만 차지하고 있는 태그다.

- <span>, <a>, <img>, <input>, <button> 등은 inline 요소다.

❗️ <span> 태그에 text-align 속성을 적용해도 정렬이 되지 않는 이유는 <span>은 inline-element라서 입력한 text만큼의 영역을 차지하고 있기 때문에 정렬을 할 수가 없다. inline이기때문에 노란색 안에서 정렬을 할 공간이 따로 없다!!

 

display : inline-block

- block 속성들처럼 width와 height를 지정할 수 있지만 이를 지정하지 않으면 inline처럼 content 내용만큼만의 영역을 차지한다.

- Block요소를 Inline요소처럼 변경하고 싶을 때  display:inline-block; 을 사용한다.