목록

 <div class='bl' style="display: inline-block;">AAAA</div>
  <div class='bl' style="display: inline-block;color:steelblue;margin-left:100px;">BBBB</div>
  <div class='bl' style="display: inline-block;color:steelblue;">CCCC</div>

결과
AAAA
BBBB
CCCC



display: inline-block;는 웹 디자인(CSS)에서 아주 자주 쓰이는 속성으로, "줄 바꿈 없이 옆으로 나열하면서도, 크기(가로/세로)를 내 마음대로 조절하고 싶을 때" 사용합니다.

쉽게 비유하자면, **'글자처럼 행동하지만, 상자처럼 다룰 수 있는 상태'**라고 이해하시면 됩니다.

1. 주요 특징

  • 옆으로 나열: block 요소(예: <div>)처럼 혼자 한 줄을 다 차지하지 않고, inline 요소(예: <span>)처럼 옆으로 나란히 배치됩니다.

  • 크기 설정 가능: 일반적인 inline 요소는 가로(width)와 세로(height) 값을 줄 수 없지만, inline-block은 이 값들을 완벽하게 적용할 수 있습니다.

  • 여백 조절: 상하좌우 마진(margin)과 패딩(padding)이 주변 요소들을 밀어내며 정확하게 적용됩니다.

2. 언제 사용하나요?

주로 다음과 같은 상황에서 필수적으로 사용됩니다.

  • 메뉴 바(Navigation): 리스트 항목들을 가로로 배치할 때.

  • 버튼 디자인: 버튼의 크기를 일정하게 맞추면서 글자 사이에 넣을 때.

  • 카드 레이아웃: 여러 개의 박스를 가로로 나란히 배치할 때.

3. 간단 요약 비교

속성줄 바꿈가로/세로 크기 지정여백(Margin/Padding)
block있음 (한 줄 차지)가능상하좌우 모두 가능
inline없음 (옆으로 나열)불가능좌우만 가능 (상하는 제한적)
inline-block없음 (옆으로 나열)가능상하좌우 모두 가능

💡 주의할 점

inline-block 요소를 사용하면 소스 코드상의 공백(엔터나 스페이스) 때문에 요소 사이에 **아주 미세한 틈(약 4px 정도)**이 생길 수 있습니다. 이를 없애려면 부모 요소의 font-size를 0으로 만들거나, 요소들을 붙여서 코딩해야 합니다.

혹시 지금 작성 중인 코드에서 박스 배치가 원하는 대로 되지 않나요? 구체적인 상황을 알려주시면 코드를 직접 수정해 드릴 수 있습니다.
이 게시물을