[CSS] display 속성

0. 들어가며

---

😏 예제로 display에 대해 설명하면 더 이해가 쉬울 것 같아 간단하게 예제를 만들어보았어요! codepen을 처음 사용해보았는데 코드와 결과가 함께 나와서 정말 편하더라구요.

🤔 CSS 코드를 짤 때 display를 자주 사용해보았음에도 block, inline, inline-block의 차이점을 설명해보라고 하면 어버버버했어요. 포스팅을 통해 다시 정리해볼 수 있는 시간이 되었어요.

1. block

---

🌱 예제로 이해하기

아래의 예제에서 파란색으로 공간을 차지하고 있는 block을 한 번 봐주세요. 다른 요소들을 다른 줄로 밀어내고 혼자서 한 줄을 차지하고 있습니다. inline과 inline-block을 보면, 각자의 내용만큼의 크기를 갖습니다. 반면에 block은 한 줄 전체를 차지하는 것을 알 수 있습니다.

❗ 주의

block은 width, height, margin, padding 속성이 모두 반영됩니다. 아래의 예제는 block 속성의 div태그에 위의 속성을 모두 적용시켜본 것입니다. 4가지 모두 잘 적용되어 통통한 박스모양을 하고있는 것을 확인할 수 있습니다.

👑 block인 대표적인 요소

아래의 요소들은 display 속성값이 block인 대표적인 요소들입니다.

<p> <div> <h> <ul> <ol> <form> 등...

2. inline

---

🌱 예제로 이해하기

아래의 예제에서 핑크색 박스인 inline요소를 보시면, 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된 것을 알 수 있습니다.

❗ 주의

inline은 width와 height 속성을 지정해도 무시합니다. block과 다른점이죠. 또한, display가 inline일 경우 margin과 padding 속성은 좌우 간격만 반영됩니다.

아래를 보면, 500px이라고 설정한 width와 heigth를 모두 무시하고 딱 컨텐츠 크기만 자리를 차지하고 있는 것을 볼 수 있습니다. margin도 상하에는 적용되고 있지 않아요.

👑 inline인 대표적인 요소

<span> <a> <em> 등...

3. inline-block

---

🌱 예제로 이해하기

아래의 예제에서 노란색 박스가 inline-block 속성을 적용시킨 요소인데요. inline-block은 말그대로 inline과 block의 특징이 합쳐졌어요. 줄바꿈도 없을 뿐더러 width, height, margin, padding 적용이 모두 가능하죠.

❗ 주의

inline처럼 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치도 되고 block처럼 width와 height지정, 그리고 margin과 padding 속성의 상하 간격 지정도 가능하답니다!

👑 inline-block인 대표적인 요소

<img> <input> <button> 등...

참고

---

MDN, display
aepee, 블록 요소와 인라인 요소