inline vs. block

inline

: 주로 텍스트를 주입 할 때 사용 되는 형태.
width는 컨텐츠 영역만큼 자동으로 잡히며 라인이 새로 추가 되지 않는다.
height 또한 폰트의 크기만큼 잡힌다.

inline 특징

• width와 height 값을 임의로 지정할 수 없다.
• margin은 top,bottom 엔 적용 되지 않는다.
• padding의 left,right는 적용 가능하고 시각적으로 반영된다.
• padding의 top,bottom은 시각적으로는 반영되지만 공간을 차지하진 않는다.

inline 요소

대표적인 태그로는 <span>, <a>, <em> 가 있다.

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

block

: 한 영역을 차지 하는 박스형태.
기본적으로 width값이 100%로 적용되며 라인이 새로 추가된다.

block 특징

• height와 width 값을 지정 할 수 있다.
• margin과 padding을 지정 할 수 있다.

block 요소

대표적인 태그로는 <div>,<p>,<h1> 가 있다.

그 외
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <dl>, <hr>, <header>, <form>, <h2~h6>, <table>, <pre>, <ul>, <ol>, <video>

+ inline-block

: inline의 특징과 block의 특징을 모두 가진 요소

• 줄바꿈이 이루어지지 않는다.
• block처럼 width와 height를 지정 할 수 있다.
• width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
• 헤당 element의 스타일을 display: inline-block로 지정해줘야 한다.

inline-block의 대표적인 요소로는 <button>,<select>가 있다.