CSS의 display 속성에 inline-block 값을 사용하면 요소가 콘텐츠의 실제 너비 또는 지정된 너비 중 더 큰 값을 기준으로 렌더링됩니다. 또한 부모 요소의 가로 공간이 모두 찰 때까지 줄 바꿈을 강제하지 않기 때문에, 인라인처럼 나란히 배치되면서 동시에 블록 수준의 크기 조절이 가능한 하이브리드 방식의 표시 방법입니다.
이러한 특성 덕분에 inline-block은 내비게이션 메뉴, 카드 레이아웃, 버튼 그룹 등 요소를 가로로 정렬하면서 각 요소의 width와 height를 자유롭게 설정해야 할 때 매우 유용하게 활용됩니다.
문법(Syntax)
CSS에서 display: inline-block을 적용하는 기본 문법은 다음과 같습니다.
Selector {
display: inline-block;
}예제 1: 색상 박스를 인라인 블록으로 배치하기
다음 예제는 여러 개의 자식 div 요소에 display: inline-block을 적용하여 한 줄에 나란히 배치하는 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Inline-Block</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-Inline-Block</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>실행 결과
위 코드를 실행하면 여섯 개의 색상 박스가 부모 컨테이너 안에서 한 줄로 나란히 배치되는 것을 확인할 수 있습니다. 각 박스는 40×40px의 고정 크기를 유지하면서도 인라인 요소처럼 옆으로 흐르며 배치됩니다.
예제 2: 다양한 display 값 비교하기
다음 예제는 flex, none, inline-block, grid 등 서로 다른 display 속성값을 함께 사용하여 각각의 렌더링 차이를 비교해 봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
#flex {
display: flex;
}
#none {
display: none;
}
.inline-block {
display: inline-block;
background-color: mintcream;
}
.grid {
display: grid;
background-color: cornflowerblue;
}
div {
margin: 30px;
padding: 5px;
height: 10px;
line-height: 5px;
text-align: center;
background-color: lightblue;
border: 2px solid black;
}
div > div {
background-color: lightpink;
border: 2px solid green;
}
div > div > div {
background-color: sandybrown;
border: 2px solid darkred;
}
</style>
</head>
<body>
<div><span id="flex">One</span>
<div><span id="none">Two</span>
<div>
<span class="inline-block">Three</span>
<span class="inline-block">Four</span>
<div>
<span class="grid">Five</span>
<span class="grid">Six</span>
</div>
</div>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 각 display 값에 따라 요소가 서로 다르게 렌더링되는 결과를 확인할 수 있습니다. 특히 display: none이 적용된 "Two" 요소는 화면에서 완전히 사라지고, inline-block이 적용된 "Three"와 "Four"는 나란히 배치되며, grid가 적용된 "Five"와 "Six"는 격자 형태로 배치되는 차이를 볼 수 있습니다.
정리
display: inline-block은 인라인 요소의 흐름 특성과 블록 요소의 크기 제어 능력을 동시에 제공하는 강력한 CSS 속성입니다. 부모 요소의 너비가 가득 찰 때까지 줄 바꿈 없이 요소를 배치할 수 있어, 반응형 레이아웃이나 가로 정렬 UI를 구현할 때 Flexbox나 Grid와 함께 자주 활용됩니다.