[CSS] 2_block, inline, inline-block

dev.soo·2020년 8월 19일
0

1. block & inline

  어떤 요소가 실제 content 의 너비와 상관 없이 페이지 안에서 너비를 다 쓰면 이걸 block 이라고 한다. HTML element 대부분은 block 이다. header, footer, p, li, table, div, h1 등등.

  inline 은 이와 반대라고 생각하면 편하다. 같은 줄 안에 요소가 함께 올 수 있다. spin, a(href 할때 씀), img 등이 그렇다.

  property 는 display 이고, value 에 block, inline, inline-block 을 넣는다.

2. inline & inline-block

  inline 의 width / height 는 콘텐츠 크기만큼만 차지하고 따로 설정해도 무시된다. width 는 안되고 padding/margin 의 좌/우는 설정 가능하다.
  반면 inline-block 은 inline 처럼 한 줄에 여러 개의 요소가 오면서도 width, height, padding, margin이 처리된다.

0개의 댓글