Inline vs Block

HTML의 여러 태그들은 태그의 성격에 따라서, "화면 전체 너비를 갖는 태그"와 "컨텐츠의 크기만큼 너비를 갖는 태그"로 나눠진다. 전자는 Block Level Element라고 하며, 후자는 Inline Level Element라고 한다.

Inline Level Element

Inline Element로는 <b>, <i>, <a>, <br>, <img>, <span> 등이 있다.

Inline Level Element 특징

• Inline Element는 Content의 너비만큼 라인을 차지하여, 한 라인에 여러 개의 블록이 놓일 수 있다.
• Inline 요소의 상,하 여백은 margin이 아니라 line-height 속성에 의해 발생한다.
• Inline 요소에는 width와 height 속성이 적용되지 않는다. 오로지 컨텐츠의 부피에 맞춰진다.
• Inline 요소가 연속으로 사용되는 경우, 약 5px 가량의 외부 margin이 자동으로 발생한다.

Block Level Element

Block Element로는 <div>, <form>, <h1-6>, <header>, <hr>, <li>, <nav>, <ol>, <p>, <ul> 등이 있습니다.

Block Level Element 특징

• Block Element는 화면 전체 너비를 점유한다.
• Block Element는 width 속성을 100%로 가지고 있다. 이것에 의해 자동으로 줄넘김이 발생하게 된다.

Block 과 Inline

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

Display 속성

Tag가 Inline인지 Block인지를 구분하는 것은 display 속성이다. 따라서 display 속성을 통해 Element 의 level(Block or Inline)을 변경할 수 있다. Inline-Block이라는 값도 존재한다.

• {display : inline}
  Element를 Inline level로 만들 수 있다.
• {display : block}
  Element를 Block level로 만들 수 있다.
• {display : inline-block}
  Element를 특별한 Inline level로 만들 수 있다. inline-block은 inline 형태를 띄지만, width/height 스타일과 margin/padding/line-height 스타일 적용이 가능하다.