CSS Layout - display: inline-block

The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline, display: inline-block and display: block:

 

 

display : inline-block 값

 

display:inline  과의 비교햇을때, display:inline-block의 주요한 차이점은 요소의 넓이와 높이의 설정을 허용하는 것이다.

또한 display: inline-block는, top과 bottom의 마진과 패딩의 넓이가 표현되어질 수 있지만, display:inline는 그렇지 못하다.

display:block와 비교했을때, display:inline-block의 중요한 차이점은 요소 다음에 오는 한줄을 추가하지 않는다는 것이다. 그래서 요소는 다른 요소옆에 머무를수 있다.

다음의 예제는 display:inline, display:inline-block, display:block의 행동의 다른점을 보여준다.

 

Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:

 

navigation 링크를 만들기 위해서 inline-block 사용하기

display:inline-block 는 아이템들을 수직적인대신에 수평적으로 보여주기위해 사용한다?

다음의 예제는 네비게이션 링크를 수평적으로 만든다.