CSS display:block, display:inline, display:inline-block

 

1. display:block    -->  box
- 요소 :  div, h1~h6, p, ul, ol, li, dl, dt, dd, addres
- 상하로 배치(block 요소 좌우 배치 위해 float 사용)
- 크기 지정 가능(width, height)
- margin, padding 상하좌우 가능
- size 지정 안했을 시 width="100%", height는 내용만큼 

2. display:inline    -->  text 
- 요소 : a, span, em, strong, label, b, i, u
- 좌우로 배치
- size 지정 안됨, width, height 내용 만큼만 크기 갖음
- margin, padding left,right만 가능
- 좌우 여러 개 비치 시 자간 때문에 사이에 4px 간격 생김

3. display:inline-block   -->  box+text
- 요소 : img, form(input, button, select, textarea)
- 상하로 배치(block 요소 좌우 배치 위해 float 사용)
- 크기 지정 가능(width, height)
- inline처럼 좌우로 배치
- 좌우 여러 개 비치 시 자간 때문에 사이에 4px 간격 생김
- 가운데 정렬 -> text-align:center로 지정

4. display 지정
-  CSS로 display를 지정, 기본 속성 바꾸기 가능
- 예) inline 요소인 span 태그를 css를 통해 display : block으로 설정하면 block 요소로 사용 가능​

5. display : none
- 요소를 렌더링 하지 않도록 설정
- 단순히 안 보이는 것이 아니라 아예 요소 자체가 안 나타나도록 한 것이기 때문에 영역도 차지하지 않음