Display - inline, inline-block, block

개요

• CSS display속성의 값인 inline, inline-block, block에 대해 알아보자

1. inline

줄바꿈 없이 한 줄에 나란히 배치되는 엘리먼트

• 대표적 예) <span>, <a>, <em>
• 특징:
  1. width, height 속성은 적용 안 됨
  2. margin, padding 속성은 좌우 간격만 적용됨

2. inline-block

줄바꿈 없이 한 줄에 나란히 배치되지만 간격을 지정할 수 있는 엘리먼트

• 대표적 예) <button>, <input>, <select>
• 특징:
  1. width, height, margin, padding 속성이 모두 적용됨
  2. css 명시: display: inline-block;
  3. 여러개의 엘리먼트를 한줄에 원하는 너비만큼 배치 가능
  

3. block

전후 줄바꿈이 지정되어 한 줄을 차지하는 엘리먼트

• 대표적 예) <p>, <div>, <h1>
• 특징:
  1. width, height, margin, padding 속성이 모두 적용됨

참조, 출처
https://ko.learnlayout.com/position.html
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model