inline
inline의 특징
- width/height 적용되지 않습니다.
- margin/padding은 위아래엔 적용되지 않습니다.
- line-height를 원하는대로 사용할 수 없습니다.
inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>,
<sub>, <br>, <code>, <em>, <small>, <tt>,
<map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.
block
block의 특징
- block은 height와 width 값을 지정 할 수 있습니다.
- block은 margin과 padding을 지정 할 수 있습니다.
block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 무조건 한줄을 점유하고 width값이 100%가 됩니다. 그리고 라인이 새로 추가됩니다.
<address>, <article>, <aside>, <blockgquote>,
<canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>,
<pre>, <ul>, <p>, <ol>, <video>block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.
inline-block
- 줄바꿈이 이루어지지 않습니다.
- width/height 적용 가능합니다.
- margin/padding-top/bottom 적용 가능합니다.
- line-height 적용 가능합니다.
- width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힙니다.
inline-block은 말 그대로 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성입니다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있습니다.
💥주의사항💥
- inline-block 끼리 공백이 생기게 되는데, 이때는 상위 div에 { font-size: 0; } 를 적용하면 해결 됩니다.
- inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는 { vertical-align: ---; } 값으로 top 등을 줘서 맞춥니다.
