CSS Reference

CSS Block/Inline

Block 와 Inline을 나눠서 설명하겠습니다. 아래설명을 확인해주세요.

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

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

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

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

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

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

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

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;
}

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

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