CSS display inline, block, inline-block의 세 가지 속성이 존재한다.
block 속성
가장 많이 사용되는 block 속성은 element(요소)가 Containing Block의 한 줄을 모두 차지하여, 다른 element가 추가되면 그 다음 줄에 이어지는 특징을 가지고 있다. 또한 block 요소에는 width, height, margin, padding 등의 값을 지정할 수 있다.
<div>, <h1>, <p> 등 자주 사용되는 마크업 요소들이 모두 block element이다.
inline 속성
inline 속성은 반대로 element(요소)가 컨텐츠의 크기만큼만 공간을 차지하여, width, height, 등의 property(속성) 값을 지정할 수 없으며, 다른 요소가 다음 줄로 이동하지 않고 baseline을 따라서 일렬로 나열된다는 것이 대표적인 특징이다. inline 요소를 가운데 정렬하기 위해서는 다음의 코드를 부모 요소에 입력하여 스타일링할 수 있다.
div {
text-align: center;
}margin, padding 속성을 지정할 수는 있지만, inline 요소는 baseline을 따라가도록 만들어져 있고 이를 벗어날 수 없어서 좌우로만 정상적으로 적용이 가능하고 상하는 공간을 차지할 수 없다.
inline element로는 <span>, <a>, <b>, <strong>, <em>, <img> 등이 존재하는데, <img> 요소 같은 경우는 width, height 값을 가지고 있는 특수한 경우로, margin을 지정할 수 있다는 특징이 있다.
inline-block 속성
inline-block 속성은 element(요소)가 inline의 특성과 block의 특성을 모두 가지고 있는 것으로, 내부적으로는 block 요소처럼 취급하고 외부적으로는 inline 요소의 성질을 가진다는 특징이 있다. 따라서 여느 inline 요소처럼 요소의 크기가 컨텐츠의 크기를 따르고 다른 요소들이 일렬로 나열된다는 특징을 가지고 있지만, block 요소처럼 width, height, margin, padding 값을 적용할 수 있는 하이브리드 속성이라고 볼 수 있을 것이다. block 요소를 컨텐츠의 크기에 맞추고 싶다면 inline-block요소를 사용하면 되고 이를 가운데 정렬하기 위해서는 부모 요소에 다음의 코드를 입력하여 스타일링 할 수 있다.
inline-block 속성은 다음과 같이 지정할 수 있다.
h1 {
display: inline-block;
}