[CSS_study] display : block, inline, inline-block

* display : block

div는 기본적으로 display : blcok이다.
block는 element이고 block옆에는 어떠한 element도 올 수 없다.

 

* display : inline

inline는 box가 아니다.

inline는 element이다. inline는 유동적이여서 너비와 높이가 없다.

 

같은 직선에 있다는 말이다. (ex. text는 inline이다, text는 box가 아님)

inline은 너비와 높이를 함께 쓸 수 없으며 inline을 쓰면 block(=box)의 속성을 모두 잃는다.

* display : inline-block

inline-block은 block의 속성을 가지고 있어서 너비와 높이가 있다.

또한 block이 서로 옆에 있을 수 있다.

 

(참고) inlink-block속성을 부여하게 되면 box사이에 여백이 생긴다.

아래와 같이 속성을 부여하여서 여백 제거 가능

div { 
  font-size: 0; 
  letter-spacing: 0; 
  word-spacing: 0; 
}