Block 과 Inline

Block와 Inline

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

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

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

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

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