block, inline, inline-block

✔️block

• 한 영역을 차지 하는 박스형태을 가지는 성질.
• 기본적으로 width값은 100%
• 라인이 새로 추가된다.
• width 와 height 값을 지정할 수 있다.
• margin 과 `padding 값을 지정할 수 있다.

대표적인 block 요소

• <address>, <article>, <aside>, <blockgquote>, <header>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <ul>, <p>, <ol>, <video>...

✔️inline

• 다른 요소들과 함께 같은 라인에서 표시된다.
• 크기는 포함하고 있는 컨텐츠의 크기에 의해 결정된다.
• width 와 height 값을 지정할 수 없다.
• margin 은 top, bottom 값은 적용 되지 않는다.
• padding은 top, bottom 값은 시각적으로만 추가되고, 따로 공간을 차지하지 않고, left, right 값은 시각적으로 추가되고 공간도 차지한다.

대표적인 inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <br>, <button>...

✔️inline-block

• inline의 특징과 block의 특징을 모두 가진 요소이다.
• 줄바꿈이 이루어지지 않는다.
• block처럼 width와 height를 지정 할 수 있다.
• 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

Reference

• https://seungwoohong.tistory.com/23
• http://triki.net/css-display-block-inline-inline-block

End.