[CSS] div에서 공백이 생기는 경우

삽질 저장소·2022년 6월 24일
0
post-thumbnail

개인 프로젝트를 하던 중 요상한 친구를 만났다.

<article>
	</img>
    <div></div>
</article>

위와 같은 구조의 카드 작성 중 배경색을 입혀서 확인해보니 이미지와 div사이에 공백이 생긴것을 발견했다.

크롬 개발자도구로도 확인해보고 이것저것 바꿔봤지만 이유를 모르겠어서 구글링을 해보니
inline속성인 img태그에서 개행문자를 인식해 저렇게 폰트 크기만큼 여백이 생긴것이라고 한다.

우리가 코드를 작성할 때 img태그를 입력하고 엔터를 친 뒤 div태그를 입력할 때 우리가 입력한 엔터를 html에서 읽어버리는 것이다.

이를 해결하기위한 여러가지 방법이 있다.

1. font-size: 0

두 태그를 가지고있는 부모 태그(여기서는 article 태그)에 font-size을 0으로 설정해주게되면 개행문자의 폰트 크기가 0이 되면 여백이 사라지게된다.
하지만 이런 방식을 사용한다면 부모태그가 가진 자식 태그들의 폰트 크기가 다 0이 되므로 자식 태그에서 다시 폰트 크기를 설정해줘야한다.

2. display: block

inline속성을 가진 img태그에서 display: block를 설정해주면 자식태그 모두 block속성이 되므로 여백이 사라진다.

3. display: flex

마지막으로 부모태그에 display: flex를 설정해주면 된다. 물론 위의 사진처럼 세로로 배열해야하는 경우에는 flex-direction: column도 같이 해줘야한다.



수정 후



별거아닌 오류였지만 해결하니 기분이 좋다 하하하하ㅏ하하하핳

1개의 댓글

comment-user-thumbnail
2023년 9월 8일

공백이 생기는 이유에 대해 설명을 잘 해주셔서 쉽게 이해하고 고쳤습니다 감사합니다!

답글 달기