inline
css의 display 속성이 inline으로 지정된 element는 줄바꿈 없이 한 줄에 다른 element들과 나란히 배치된다. 대표적인 inline element로는 span이나 a,em 태그 등을 들 수 있다.
사용시 주의사항
- width와 height 속성을 지정해도 무시된다. 해당 컨텐츠의 크기 만큼만 공간을 차지하도록 되있기 때문이다.
- margin과 padding 속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.
block
display 속성이 block으로 지정된 element는 줄바꿈이 들어가 다른 element들을 다른 줄로 밀어내고 혼자 한 줄을 차지하게 된다. 대표적인 block element로는 div나 p, h1 등이 있다.
inline-block
display 속성이 inline-block 으로 지정된 element는 inline과 block을 합쳐놓은듯 동작하는데 기본적으로 inline element 처럼 줄바꿈 없이 한 줄에 나란히 배치되지만 block element 처럼 width와 height 속성을 지정할 수 있고 margin & padding 속성의 상하 간격 지정이 가능하다.
- 대표적인 inline-block의 element
-button
-input
-select
--> block element 내부 + inline element 외부
