CSS 레이아웃 - display: inline-block

display: inline-block

와 비교해 display: inline 비교해 보면 주요 차이점은 display: inline-block 요소에 너비와 높이를 설정할 수 있습니다.

또한, display: inline-block이 설정되면 상하 외간격/내간격을 유지하되, display: inline은하지 않습니다.

display: block과 비교해 주요 차이점은 display: inline-block이 요소 후에 줄바꿈 문자를 추가하지 않기 때문에 다른 요소와 함께 위치할 수 있다는 점입니다.

다음은 display: inline, display: inline-block 및 display: block의 다른 동작을 보여줍니다：

실례

span.a {
  display: inline; /* span의 기본값 */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

직접 시도해보세요

네비게이션 링크를 생성하기 위해 inline-block 사용

display의 일반적인 사용법:inline-block 목록 항목을 수평으로 보여주기 위해 사용됩니다. 다음 예제는 수평 네비게이션 링크를 생성합니다:

실례

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}
.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

직접 시도해보세요