CSS 레이아웃 - 표시: 인라인 블록
디스플레이: 인라인 블록 값
에 비해 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; /* the default for 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;
}
인라인 블록을 사용하여 탐색 링크 만들기
의 일반적인 용도 중 하나 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;
}