CSS를 작성하다보면 표준에 맞지 않는 경우가 종종 발생합니다. "inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'" 이 메세지를 보면 "inline-block은 float로 인해 무시됩니다. 'float'에 'none'이 아닌 다른 값이 있으면 상자가 플로팅되고 'display'는 'block'으로 처리됩니다." 인라인 블록에 플로트를 사용할 수 없다는 뜻인데요. inline, block, inline-block에 대해 어떻게 동작하는지 이해할 필요가 있습니다.

1. display: inline

텍스트 크기만큼 공간을 점유하고, 다음 태그에 줄바꿈이 발생하지 않습니다. 줄바꿈 없이 텍스트를 붙일 때 사용하는 span태그와 같이 처리됩니다.

• width/height 사용 불가
• margin/padding-top, bottom 사용 불가
• line-height 사용 불가

2. display: block

div 태그와 같이 자동으로 줄바꿈이 됩니다. 무조건 한줄을 점유하기 때문에 이어 붙이려면 float: left를 사용해야 합니다.

• width/height 사용 가능
• margin/padding-top, bottom 사용 가능
• line-height 사용 가능

3. display: inline-block

inline-block은 inline과 block의 속성을 모두 가집니다. 줄바꿈이 되지 않고, 동일한 라인에 연속해서 엘리먼트들을 붙일 수 있습니다.

• width/height 사용 가능
• margin/padding-top, bottom 사용 가능
• line-height 사용 가능
• float 사용 불가