inline-block 레이아웃

문제점

인라인블럭으로 레이아웃을 만들었을때 빈공간이 생기는 현상

#이슈1

마크업으로 인한 빈공간이 생기거나 자리를 못잡고 밑으로 떨어짐
해결방법
브라우저의 html상 공백을 처리하는 방식 때문에 빈공간이 생김
마크업 한줄로 작성했을때 해결하기

#설명

display:inline-block 속성을 부여해준 inline-block 요소의 space 한칸만큼의 공백으로 처리하기 때문에 미세한 공백이 발생 해결방법으로는 마크업을을 한줄로 작성하면 inline-block요소 사이에 공백이 제거가 되어 공백이 사라집니다.

그리고 추가로 inline 성질을 갖고있는 요소들은 '글자'처럼 여겨기지 때문에
vertical-align 속성 vertical-align: top으로 inline 요소들의 정렬선을 바꿔주어야한다

실행화면

영역1
영역2

#이슈2

마크업으로 인한 빈공간이 생기거나 자리를 못잡고 밑으로 떨어짐
해결방법
부모태그에 font-size:0 속성을 추가하여 해결하기

#설명

저렇게 긴 공백을 브라우저에선 space 한칸으로 처리하기 때문에 space 한칸 공백을 없애는 방법입니다. font-size가 0이면 공백이 있어도 없는것처럼 보이게 되죠. 공백은 font-size의 영향을 받기 때문입니다.

하지만 부모속성에 font-size:0을 주었기 때문에 자식한테도 font-size를 다시 지정해줘야한다

실행화면

영역1
영역2

#이슈3

마크업으로 인한 빈공간이 생기거나 자리를 못잡고 밑으로 떨어짐
해결방법
negative margin 사용사여 해결하기

#설명

margin:-값을 이용해서 공백값을 없애버릴수 있다.

실행화면

영역1
영역2