Web inline-block is ignored due to the float. If 'float' has a value other…
페이지 정보
본문
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 사용 불가
추천0 비추천0
- 이전글이클립스에 모델 만들 때 getter, setter 자동으로 만드는 방법. (Spring, MyBatis) 22.02.04
- 다음글Out of video memory trying to allocate texture! Make sure your video card has the minimum required memory, try lowering the resolution and/or closing other applications that are running. Exiting... 22.02.01
댓글목록
등록된 댓글이 없습니다.