[css] inline-block 요소 width의 합이 100%가 되지 않을 때

정형주·2020년 11월 12일

프론트엔드

목록 보기
3/5

문제

width 값이 50%인 두 개의 div 요소에 display : inline-block 를 설정했을 때,
두 번째 div가 다음 줄로 밀려나는 이슈가 발생합니다.

발생 이유

inline 엘리먼트들은 html안의 div 태그의 글자 간격이 미세하기 적용되기 때문입니다.
따라서 첫번째 div의 close tag 인 태그와 두번째 opening tag인

사이에 간격이 발생합니다.
이를 고려하여 아래의 첫번째 해결 방법을 사용할 수 있습니다.

1. html 파일의 div 태그 사이의 space를 없앤다.

이 방법을 사용할 경우 html 코드의 가독성이 떨어질 수 있습니다.

2. div의 parent css 속성에 font-size : 0 으로 설정한다.

참고자료

  1. https://uxengineer.com/inline-block-elements-100-percent-width/
profile
개발자 지망생

0개의 댓글