block vs inline vs inline-block

NavDevJae·2021년 7월 4일
0

INTERVIEW PREPARATION

목록 보기
11/15
post-thumbnail

display:block

  • 무조건 한 줄을 점유하고 있다.
  • 무조건 줄바꿈이 된다.
  • 대표적인 tag는 div tag이다.

display:inline

  • text 크기만큼만 공간을 점유한다.
  • 줄바꿈을 하지 않는다.
  • 대표적인 tag는 span tag이다.
  • width / height 적용 불가하다.
  • margin / padding의 top과 bottom을 control하지 못한다.
  • line-height 자유롭게 사용 불가하다.

display:inline-block

  • inline 속성, block 속성 모두 가지고 있다.
  • inline 속성에서 width/height 적용 및 margin/padding의 top/bottom을 control 할 수 있다.
  • line-height 적용 가능하다

주의 사항

  • inline-block 사이 공백이 생기면 부모 tag에 font-size:0을 적용한다.
  • inline-block 간 높이가 맞지 않을 때 상위 공백이 생기는데 vertical-align:top을 적용한다.
profile
전직 항해사 출신 미래 개발자

0개의 댓글