display: block과 inline 차이

display: inline;

display 속성에 inline 값을 가진 태그로 <span>이 대표적입니다. content나 text 크기만큼 크기를 갖고 동일 라인에 붙습니다. 보통 text 내에 특정 부분에만 스타일을 간단히 줄 때 많이 사용됩니다.

inline 값을 가진 태그로는 <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite> 등이 있습니다.

inline 값을 가진 태그 아래와 같은 특징을 갖습니다.

1. width / height 속성이 적용이 안됩니다.

2. margin / padding-top / padding-bottom 속성이 적용이 안됩니다.

3. line-height 속성을 원하는 대로 적용하기 힘듭니다. (<span> 태그에 line-height 속성을 적용하면 해당 span 상자에 적용이 안되고 부모 요소의 크기에만 영향을 미칩니다.)

display: block;

block 속성은 하나의 라인을 무조건 차지하게 됩니다. 다음에 오는 태그는 다음 줄로 넘어가게 되면서 줄 바꿈이 됩니다.

block 값을 가진 태그는 width / height 속성을 적용 시킬적용시킬 수 있고, margin / padding 속성도 적용시킬 수 있습니다.

display: inline-block;

inline-block 값이 적용된 태그는 inline 값과 같이 content나 text 크기만큼 크기를 갖고 줄바꿈이 이루어지지 않습니다. 또한 block 값과 같이 width / height / margin / padding 속성을 적용시킬 수 있습니다.