CSS - display property

css에서 selector에 주는 display property 값은 해당 요소가 어떻게 나타나는지를 결정한다.

이 중 outer display type값으로 inline, block, inline-block 등이 있다. inline, block element 예시

inside display type값으로는 table, flex 등이 있다. (참고 링크)

요소를 숨기는 none도 있다. none에서 다른 값으로 바꾸면 없던 게 나타나는 것처럼 보인다.

inline

공간을 content의 크기에 맞춘다. 줄바꿈을 하지 않는다. 행간(line-height)을 조절할 수 없다.

적용 불가: width, height, margin-top, margin-bottom, padding-top, padding-bottom

e.g. span, input

block

무조건 한 줄을 점유한다.

e.g. div, article

inline-block

content의 크기에 맞춘다. inline에서 불가능했던 property들을 사용할 수 있다.

고려 사항

inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결된다.
inline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있다.

참고 링크