====== CSS Inline-block ====== * description : CSS display:inline-block * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-18 \\ \\ =====Source of the article==== * [[https://www.w3schools.com/css/css_inline-block.asp|CSS The display:inline-block value]] \\ \\ =====The display: inline-block value===== ''display: inline'' 속성과 비교하면, 가장 중요한 차이는 ''display: inline-block'' 속성은 요소에 너비와 높이를 설정을 허용한다는 것입니다.\\ \\ 또한, ''display: inline-block'' 속성으로, 상단 및 하단 마진/패딩이 적용되지만, ''display: inline'' 속성은 상단 및 하단 마진/패딩이 적용되지 않습니다.\\ \\ ''display: block'' 속성과 비교하면, 가장 중요한 차이는 ''display: inline-block''속성은 요소 다음에 줄바꿈(line-break)을 추가하지 않아서, 요소는 다른 요소 옆에 위치할 수 있습니다.\\ \\ 하기의 예제에서 ''display: inlin'' , ''display: inline-block'' 그리고 ''display: block'' 속성의 다른 동작방식을 확인할 수 있습니다.\\ ====예제==== The display Property

The display Property

display: inline

orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.Aliquamvenenatisgravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.Aliquamvenenatisgravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline

orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.Aliquamvenenatisgravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
\\ \\ =====Using inline-block to Create Navigation Links===== ''display: inline-block'' 속성의 일반적인 사용 용도는 세로(수직)이 아닌 가로(수평)로 항목들을 표시하는 것입니다.\\ 하기의 예제는 가로(수평) 방향으로 네비게이션 링크를 만듭니다.\\ \\ ====예제==== Horizontal Navigation Links

Horizontal Navigation Links

By default, list items are displayed vertically. In this exmaple, we use display: inline-block to display them horizontally (side by side).

Note: If you resize the browser widnow, the links will automatically break when it becomes too crowded.

{{tag>오션, CSS display inline-block,}}