display: inline-block 속성값이 적용된 요소는 인라인 수준의 블록 컨테이너로 표시됩니다. 즉, 텍스트처럼 한 줄에 나란히 배치되면서도, 블록 요소처럼 너비·높이·패딩·마진 등 박스 모델 속성을 자유롭게 제어할 수 있는 것이 가장 큰 특징입니다.
inline-block의 주요 특징
- 인라인 흐름을 따르므로 다른 인라인 요소들과 같은 줄에 배치할 수 있습니다.
- width, height 속성이 적용되며, 값을 지정하지 않으면 콘텐츠 크기만큼 자동으로 맞춰집니다.
- padding과 margin이 상하좌우 모든 방향에 정상적으로 적용됩니다.
예제 1: inline-block 기본 사용법
다음은 CSS에서 inline-block 속성값을 구현한 예제입니다 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo {
display: inline-block;
}
</style>
</head>
<body>
<h1>학생 성적 발표</h1>
<div>
MCA 학생의 성적은 <p class="demo">2019년 12월 20일</p>에 발표됩니다. 당일 오후 8시에 웹사이트를 확인해 주세요.
</div>
</body>
</html>
출력 결과
위 예제에서 날짜 부분은 문단(p) 요소임에도 불구하고 화면에서 텍스트 흐름을 끊지 않고, 문장 중간에 주황색 배경의 강조 박스 형태로 자연스럽게 삽입된 것을 확인할 수 있습니다.
예제 2: none과 inline-block 비교
이번에는 display: none과 display: inline-block의 동작 차이를 비교하는 예제입니다 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo1 {
display: none;
}
p.demo2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>경기 일정 안내</h1>
<div>
경기는 12월 20일 <p class="demo1">오전 9시</p> 오전 10시에 시작됩니다.
</div>
<div>
경기는 12월 20일 <p class="demo2">오후 5시</p>에 종료됩니다.
</div>
</body>
</html>
출력 결과
첫 번째 문장의 '오전 9시'는 display: none이 적용되어 화면에서 완전히 사라지고 공간조차 차지하지 않습니다. 반면 두 번째 문장의 '오후 5시'는 display: inline-block 덕분에 문장 안에서 강조 박스로 표시됩니다.
정리
inline-block은 인라인 요소의 자연스러운 흐름과 블록 요소의 박스 제어 능력을 동시에 제공하는 값입니다. 이러한 특성 덕분에 내비게이션 메뉴, 버튼 목록, 카드형 레이아웃 등 요소들을 가로로 나열하면서 크기를 조절해야 하는 UI에서 널리 활용됩니다.