Inline-block

우리는 이전에 Inline 속성과 Block 속성을 배운 적이 있다. Inline 속성은 줄처럼 흐르는 듯한 느낌을 가지고 있고, Block 속성은 하나의 자리를 잡아 길막을 하는 느낌을 가지고 있었다. 그러면 이 두가지를 절충하여 사용할 수는 없을까?

Inline-Block >> Inline && Block

Inline-Block 속성은 Inline 속성과 Block 속성을 서로 합쳐서 사용할 수가 있다.

이 속성을 이용하면 Inline 속성에서 사용할 수 없던 width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom을 사용할 수 있다.

덕분에 Inline 속성처럼 물처럼 흐르고, Block 속성처럼 길막을 하여 하나의 자리를 잡는 두가지의 속성을 둘다 사용할 수 있다.

과연, Inline-Block 속성이 둘다 이용 가능하므로 가장 좋은걸까? 그렇다곤 할 수 없다. 우린 그렇기에 적재적소에 맞게 Block, Inline, Inline-Block 속성을 이용해야 한다.