display: inline
으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 엘리먼트로 <span>, <a>, <em>
태그 등이 있습니다.
여러 개의 inline
엘리먼트들을 다음과 같이 마크업하면 줄 바꿈 없이 순서대로 한 줄에 보이게 됩니다.
before
<a>A</a>
<span>SPAN</span>
<em>EM</em>
after
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
inline
엘리먼트를 사용할 때 주의할 점은, width, height
속성을 지정해도 무시된다는 것입니다. 왜냐하면, 태그가 마크업하고 잇는 컨테츠의 크기 만큼만 공간을 차지하기로 되어 있기 때문입니다. 또한, margin, padding
속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.
ex) https://codepen.io/woongminKi/pen/OJobLaE
display: block
으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 엘리먼트로 <div>, <p>, <h1>
태그 등이 있습니다.
여러 개의 block
엘리먼트들을 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.
before
<h1>H1</h1>
<div>DIV</div>
<p>P</p>
after
div {
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
block
엘리먼트는 inline
엘리먼트와 달리 width, height, margin, padding
속성이 모두 반영 됩니다.
ex) https://codepen.io/woongminKi/pen/YzOpKBr
display: inline-block
으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작합니다. 기본적으로 inline
엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block
엘리먼트처럼 width, height
속성 지정 및 margin, padding
속성의 상하 간격 지정이 가능합니다.
즉, 내부적으로는 block
엘리먼트 규칙을 따르면서 외부적으로는 inline
엘리먼트의 규칙을 따르는 것입니다.
대표적으로 <button>, <input>, <select>
태그 등이 있습니다.
before
<a>A</a>
<span>SPAN</span>
<em>EM</em>
after
span {
display: inline-block;
background: yellow;
width: 200px;
height: 50px;
margin: 20px;
padding: 10px;
}
inline-block
을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있어 레이아웃에 활용할 수 있습니다.
ex) https://codepen.io/woongminKi/pen/rNZWBbV
참고
https://www.daleseo.com/css-display-inline-block/
https://developer.mozilla.org/en-US/docs/Web/CSS/display