1. inline : display 속성이 inline 으로 지정된 엘리먼트인 경우 줄바꿈이 일어나지 않으며 한줄에 표시된다.
대표적인 inline 엘리먼트는 <span>,<a> 등이있다.
inline 엘리먼트 사용시 주의할 점.
- width와 height 속성을 지정해도 무시된다는 것 (이유 : 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다.)
- margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.
2. block : display 속성이 block으로 지정된 엘리먼트는 전 , 후 줄바꿈이 들어가므로 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.
대표적인 block 엘리먼트는 <div> , <h1> , <p> , <aside> , <section> , <header> , <main> , <form> 등이 있다.
block 엘리먼트 사용시 주의할점.
- block엘리먼트는inline엘리먼트와 다르게 width,height,margin,padding 속성을 모두 반영할 수있습니다.
3. inline-block : display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.
대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등을 들 수 있습니다.
inline-block 사용시 주의할점.
- block 속성처럼 줄바꿈이 가능합니다.
- block 속성과 다르게 width와 height를 지정하지 않으면 컨텐츠의 크기 만큼 공간을 차지합니다.
- inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.