CSS Block/Inline

Block

지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.
대표적인 block 엘리먼트로 <div>, <p>, <h1> 태그 등이 있습니다.

<h1>

<h1>

<h1> style="background-color: yellow;">
    <h1>
</h1><br>
<h1> style="background-color: yellow; height: 100px;">
    <h1>
</h1>

Inline

지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.
대표적인 inline 엘리먼트로 <span>, <a>, <em> 태그 등이 있습니다.

<em> <em>

<em> style="background-color: yellow;">
    <em>
</em>
<em> style="background-color: yellow; height: 100px;">
    <em>
</em>

Inline-Block

지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.
하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.
대표적인 inline-block 엘리먼트로 <button>, <input>, <select> 태그 등이 있습니다.

<button> style="background-color: yellow;">
    <button>
</button>
<button> style="background-color: yellow; height: 100px;">
    <button>
</button>