간단한 html 구성 질문

Question

연두색 배경의 div 안에서 반복문으로 div요소를 반복시켰는데요반복시킨 요소는 display: inline-block 줬고 background-image로 사과 줘서 저런모양이 나왔습니다만마진도 없고 요소들 사이에 뭐 든것도 없고 공백도 없는데 저렇게 반복과정에서 다음열로 넘어가면 간격이 생기더라고요?해결방법 아시는분 가르침을 부탁드립니다

Haileyang · Accepted Answer

간격이 생기는 이유는 각 사과영역마다 1간격이 존재하기 때문입니다.

를 작성하고 엔터를 누르고 해당 코드를 복제할때 생기는 엔터 간격이 스페이스 1의 간격으로 간주하고 이런 부분은 inline-block 특성이라 상하 간격으로도 발생하지만 좌우간격으로도 발생합니다. 이 줄간격 때문에 생성되는 스페이스를 없애기 위해서는 상황에 따라서 달라지는데, 해당 요소를 일렬로만 나열하고 반응형에서 떨구지 않을 계획이라면 부모 즉 divwrap에 white-space: nowrap을 사용하실 수 있습니다. 해당 요소를 떨구고 싶다면 부모에 font-size: 0을 줘서 간격을 없앨 수 있습니다. 이러한 부분이 싫으시면 자식에 display inline block 말고 부모에 display flex를 사용할 수 있습니다.

종로3가 · Answer

관련 코드를 올려주시기 바랍니다.

yeori · Answer

와 그러네요

간단한 html 구성 질문

3개의 답변

Q&A 목록