줄 바꿈 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)

박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스는 inline 박스이라고 부른다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다.

 

🤔 block

 

- block 특성을 가지는 요소의 특징

• 항상 새로운 라인에서 시작한다.
• 화면 크기 전체의 가로폭을 차지한다.(width:100%)
• width, height, margin, padding 프로퍼티 지정이 가능하다.
• block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.

 

- block 레벨 요소 예

• div
• h1 ~ h6
• p
• ol
• ul
• li
• hr
• table
• form

See the Pen Untitled by 신동재 (@tllspaez-the-looper) on CodePen.

 

 

 

 

🤔 inline

 

- inline 특성을 가지는 요소의 특징

• 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.(새로운 라인에서 시작하지 않기 때문에 문장의 중간에 들어갈 수 있다.)
• content의 너비만큼 너비폭을 차지한다.
• width, height, margin, padding 프로퍼티 지정할 수 없다.(상, 하 여백은 line-height로 지정)
• inline 요소 뒤에 공백이 있는 경우, 4px의 space가 자동 지정된다.
• inline 요소 내에 block 요소를 포함 할 수 없다.

 

- block 레벨 요소 예

• span
• a
• strong
• img
• br
• input
• select
• textarea
• button

 

🤔 inline-block

 

block과 inline 레벨 요소의 특징을 모두 갖는데, inline 요소와 같이 한 줄에 표현되면서 width, height, margin 등 프로퍼티를 지정할 수 있다.

See the Pen Untitled by 신동재 (@tllspaez-the-looper) on CodePen.

 

 

 

 

 

 

 

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	컨텐츠가 차지하는 만큼	컨텐츠가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능