[CSS] block vs inline vs inline-block

display

시작하기에 앞서 display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정됩니다.

---

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 즉, block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다.

대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.

특징

width, height, margin, padding 속성이 모두 반영이 됩니다.

---

inline

display 속성이 inline으로 지정된 엘리먼트는전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.

대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.

특징

❗ width와 height 속성을 지정해도 무시됩니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. (width 속성으로 요소의 너비를 직접 지정할 수 없음 )

❗ margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

❗ 인라인 요소의 상,하 여백은 margin이 아닌 line-height속성에 의해 발생합니다.

❗ inline 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.

block & inline 차이

1. 요소가 새로운 행(new line)에서 시작하는지
2. 요소의 크기를 지정할 수 있는지

---

inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것입니다.

대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등을 들 수 있습니다.

주의점

⚠️inline-block 끼리 공백이 생기게 되는데, 이때는 상위 div에 { font-size: 0; } 를 적용하면 해결이 됩니다.

⚠️inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는{ vertical-align: ---; } 값으로 top 등을 줘서 맞춰주시면 됩니다.

 

 

 

참고

https://seungwoohong.tistory.com/23

https://www.daleseo.com/css-display-inline-block/

http://triki.net/css-display-block-inline-inline-block

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=leesd88&logNo=220682157303