display: block, inline-block, inline 차이점

display 속성에서 html 요소가 형성하는 박스를 조정할 수 있으며, 주로 display에는 block, table, flex, gird등으로 css로 레이아웃을 구성하는 용도로도 많이 쓰이고 있습니다.

display: block;

display: block은 부모요소의 너비만큼 같은 너비로 채워집니다.
예를 들어 부모요소의 너비가 300px라고 가정했을 때, 자식요소의 너비도 300px만큼 채워집니다.

HTML

<div class="block" style="width: 300px;">
    <div>오늘의 작업 1</div>
    <div>오늘의 작업 2</div>
    <div>오늘의 작업 3</div>
</div>

CSS

.block div{
    display: block;
    background: #ffd67a;
}

.block div:nth-child(2){
    background: #ffe29f;
}

.block div:last-child{
    background: #fff0cc;
}

block으로 지정된 요소

<div>, <section>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <blockquote>, <pre>, <table>, <form>, <nav>, <article>, <article>, <header>, <footer> 등

---

display: inline-block;

display: inline-block은 자식요소에 텍스트를 넣었다고 가정했을 때 그 텍스트만큼만 너비가 정해집니다.
예를 들어 부모요소의 너비가 300px라고 가정했을 때, 자식요소의 너비는 텍스트만큼 너비가 되며, 자식요소가 여러개가 있을 때 바로 앞의 자식요소의 옆에 위치하게됩니다. 자식의 너비가 부모의 너비를 뛰어넘을 수 없으며, 자식의 너비가 초과되었을때, 다음 행으로 이동합니다.

HTML

<div class="inline-block" style="width: 300px;">
    <div>오늘의 작업 1</div>
    <div>오늘의 작업 2</div>
    <div>오늘의 작업 3</div>
</div>

CSS

.inline-block div{
    display: inline-block;
    background: #ffd67a;
}

.inline-block:nth-child(2){
    background: #ffe29f;
}

.inline-block:last-child{
    background: #fff0cc;
}

---

display: inline;

겉보기에는 inline-block과 같은 형태를 보이지만, 스타일을 지정할 때 높이(height)와 너비(width)를 지정할 수 없습니다.

HTML

<div class="inline" style="width: 500px;">
    <div>오늘의 작업 1</div>
    <div>오늘의 작업 2</div>
    <div>오늘의 작업 3</div>
</div>

CSS

.inline div{
    display: inline-block;
    background: #ffd67a;
}

.inline:nth-child(2){
    background: #ffe29f;
}

.inline:last-child{
    background: #fff0cc;
}

inline-block, inline으로 지정된 요소

<a>, <span>, <strong>, <em>, <b>, <label>, <abbr>, <acronym>, <q>, <cite>, <sup>, <sub>, <code>, <var>, <big>, <small>, <u> 등

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받고 있습니다