Block

대부분의 HTML element(요소)는 block 요소이다.
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>등이 모두 block 요소에 해당하는 태그이다.

block요소는 한 영역을 차지하는 박스형태를 가진다.
기본적으로 width값은 100%가 된다. 즉 이 요소의 좌우측에 다른 요소를 붙여넣을 수 없다.
그 자체로 한 줄을 완전히 차지한다.

• margin, padding 속성이 적용된다.
• 너비(width)와 높이(height)값을 지정 할 수 있다.

Inline

Inline요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다.
<span>, <a>, <img>등의 태그들이 inline요소이다.

주로 텍스트를 주입할 때 사용된다. block요소처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되어 라인이 새로 추가되지 않는다.

• 상, 하단 외부 여백(margin-top, margin-bottom)속성이 적용되지 않는다.
• padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적인 부분은 적용되나 공간은 차지하지 않는다.
• 너비(width)와 높이(height)속성이 적용되지 않고 태그가 품고있는 내부요소의 부피에 맞춰진다.
• 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해 좌우에 5px 가량의 여백(margin)이 자동으로 발생한다.

Inline-Block

성질 자체는 Inline과 비슷하나 Inline의 단점들을 보완한 것이 특징이다.
동일 라인에 여러 태그를 붙일 때 쓸 수 있다.

• 너비(width)와 높이(height)적용 가능
• margin, padding top/bottom 적용 가능
• line-height 적용 가능

다만 고려해야 할 것이 있다.

• Inline-Block 끼리 공백이 생기게 되는데 이때 상위 div에 {font-size : 0;}를 적용하면 해결된다.
• Inline-Block 끼리 높이가 안맞을시 상위 공백이 생기는데 이때는 {vertical-align : ---;}값으로 top등을 줘서 맞춰주면 된다.

block요소의 성질을 가진 <p>태그를 css를 이용하여 inline스타일로 바꿀 수 있다.(<span>과 똑같은 디자인이 된다.)

p {
         display: inline-block;
     }

반대로 inline요소를 block성질을 가진 태그로 바꿀 수도 있다.

span {
         display: block;
     }

Inline-Block

Block과 Inline 속성 태그 표기시 주의할 점

<span><p>Bad 오류입니다.</p></span>
 <p><span>Good 올바른 표기입니다.</span></p>

Block은 Inline을 포괄하는 더 큰 개념이다. 따라서 마크업 할 때에는 Inline속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 된다.