inline
- 줄바꿈 없이 다른 요소들과 나란히 배치
- 대표적인
inline요소 :<span>,<a>,<em>등 - 해당 태그의 컨텐츠의 크기만큼만 공간을 차지하기 때문에
width,height속성을 지정해도 무시되며,margin,padding속성 또한 좌우 간격만 반영되고, 상하 간격은 반영되지 않음
block
- 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지
- 대표적인
block요소 :<div>,<p>,<h1>등 inline요소와 달리width,height,margin,padding속성이 모두 반영됨
inline-block
inline요소와 같이 줄바꿈 없이 한 줄에 다른 요소와 나란히 배치block요소와 같이width,height및 상하margin,padding지정 가능- 즉, 내부적으로는
block요소의 규칙을 따르고, 외부적으로는inline요소의 규칙을 따르는 형태 - 대표적인
inline-block요소 :<button>,<input>,<select>등
위처럼 <span>태그는 inline, <div>태그는 block등의 속성값은 user agent stylesheet 즉, 브라우저의 내장 스타일이 적용된 것이고 css의 display프로퍼티를 통해 원하는대로 자유롭게 변경이 가능하다.
