inline / block / inline-block 차이점
css display 속성 3가지의 특징과 각각의 차이첨을 알아보도록 하겠습니다.
1. display: inline
대표적으로 <span>태그를 예로 들을 수 있으며 text의 크기만큼 공간 차지하고 줄바꿈을 하지않는다.
width, height : 적용 불가능
margin, padding-top/bottom : 적용 불가능
line-height : 적용 불가능
display:inline;
2. display: block
block은 대표적으로 <div>태그로 줄바꿈 기능을 무조건 포함하고 있습니다.
display:block;
3. display: inline-block
inline-block 속성은 이름처럼 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있습니다. inline 속성과 비슷하지만(줄바꿈X) 기존에 적용할 수 없었던 width, height, line-height 를 적용 할 수 있는 특징을 가지고 있습니다.
display:inline-block;
display:inline-block;
참고사항
* inline-block 사이에 공백이 생길경우 부모 태그에 font-size: 0 를 적용하면 해결된다.
* inline-block 끼리의 높이가 맞지 않을 경우 상위 공백을 제거하기 위해 vertical-align: top 을 적용하면 해결할 수 있다.