Inline, Inline-block, Block

Inlinem, Inline-block, Block을 알아보기 전,
display란?
: 화면이 렌더링 되었을 때 어떠한 특정 영역이 표시 되는데 성질을 부여하는 property이고, 그 중 가장 많이 사용 되는 inline과 block성질(display property의 값)

Inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>,
<input>, <sub>, <br>, <code>, <em>, <small>, <tt>,
<map>, <textarea>, <label>, <sup>, <q>, <button>, <cite> 등

• span을 예로 들면, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않음
• width/height 적용 불가
• margin/padding-top/bottom 적용 불가
• line-height를 원하는대로 사용 불가

Block 요소

<address>, <article>, <aside>, <blockquote>,
<canvas>, <dd>, <div>, <dl>, <hr>, <header>,
<form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>,
<pre>, <ul>, <p>, <ol>, <video> 등

• Block의 속성은 무조건 한줄을 점유하고 있으며, 다음 태그는 무조건 줄바꿈이 적용됨
• 대표적인 태그 : div, p 등

Inline-block

• Inline 속성의 특징과 Block 속성의 특징 둘 다 가지고 있음
• 기본적인 특징은 Inline 속성과 비슷한데(줄바꿈을 하지 않고, 동일한 라인에 작성 가능) Inline 속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀 하게 적용할 수 있음
• width/height 적용 가능
• margin/padding-top/bottom 적용 가능
• line-height 적용 가능

• Iline-block 사용 시 Tip
  • Inline-block 사이에 공백이 생길 경우, parent 태그에 font-size: 0을 적용
  • 높이가 맞지 않을 경우 상위 공백이 생기게 되는데 vertical-align: top을 적용