inline, inline-block, block

CSS의 Display속성값으로는 inline, block 그리고 inline-block이 있습니다.

HTML Element들도 위의 속성값을 구분 할 수 있습니다.

1. inline

inline으로 지정된 element는 전후 줄바꿈없이 한줄에 다른 element들과 나란히 배치됩니다. element에는 < span >, < a >, < em > 태그 등이 있습니다. 사용 시 주의사항은 해당 태그가 마크업하고 있는 컨텐츠의 크기만큼만 공간을 차지하기에 width와 height의 속성값은 지정해도 무시됩니다. margin과 padding값도 좌우 간격만 반영되고 상하는 무시되는 점 기억해주세요.

2. block

block으로 지정된 element는 전후 줄바꿈이 들어가 한줄을 다 차지하고 다른 element는 다른 줄로 밀어내게 됩니다. element에는 < div >, < p >, < h1 > 태그 등이 있습니다. inline에서 주의해야했던 width나 height의 속성값은 반영됩니다.

3. inline-block

inline-block는 기본적으로 inline처럼 한줄에 배치되게 됩니다. 하지만 inline에서 무시되던 width, height의 속성값을 적용할 수 있고 margin과 padding의 상하값도 적용됩니다. element로는 < button >, < select > 태그 등이 있습니다.

4. 속성값 변경

각 element별로 기본적으로 정해진 display속성값이 있지만 언제든 바꿀 수 있습니다.

.inline-p {
display: inline;
}

.block-span {
display: block;
}

block속성을 가진 p나, inline속성을 가진 span도 다른 속성으로 지정하는 것을 통해 바뀐 속성을 지정받아 적용가능 합니다.