인라인/인라인 블록 요소 사이의 공백을 제거하는 방법은 무엇입니까?

Question

<p><span>span</span> 요소 사이에는 4픽셀 너비의 공간이 있습니다. </p> <pre class="brush:css;toolbar:false;">스팬 { 디스플레이: 인라인 블록; 너비: 100px; 배경색: palevioletred; }</pre> <pre class="brush:html;toolbar:false;"><p> <스팬> 푸 <스팬> 바

<p>바이올린 데모</p> <p>HTML에서 <span>span</span> 요소 사이의 공백을 제거하여 이 공백을 제거할 수 있다는 것을 알고 있습니다. </p> <pre class="brush:html;toolbar:false;"><p> 푸 바 </p> </pre> <p>다음과 관련되지 않은 CSS 솔루션을 찾고 있습니다.</p>

• HTML을 수정합니다. </li>
• 자바스크립트를 사용하세요. </li> </ul><p><br /></p>

Answer 1

CSS3 호환 브라우저의 경우 white-space-collapsing:discard속성

을 사용할 수 있습니다.

참조: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

Answer 2

또는 flexbox를 사용하여 이전에 inline-block을 사용하여 달성했을 수 있는 많은 레이아웃을 구현할 수 있습니다: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

이 답변이 꽤 유명해져서 다시 작성합니다.

실제 질문을 잊지 마세요:

이 문제는 CSS만으로 해결할 수 있지만 완전히 안정적인 CSS 수정 방법은 없습니다.

원래 답변에서 제가 제안한 해결책은 상위 요소에 font-size: 0，然后在子元素中声明合理的font-size를 추가하는 것이었습니다.

http://jsfiddle.net/thirtydot/dGHFV/1361/

이 기능은 모든 최신 브라우저의 최신 버전에서 작동합니다. IE8에서 작동합니다. Safari 5에서는 작동하지 않지만 Safari 6에서는 작동합니다. Safari 5는 거의 죽은 브라우저입니다(0.33%, 2015년 8월).

상대적인 글꼴 크기와 관련된 대부분의 문제는 복잡하지 않습니다.

그러나 HTML을 자유롭게 변경할 수 있는 경우(대부분의 사람들이 그렇습니다) 이는 합리적인 솔루션이지만 권장하지는 않습니다.

---

숙련된 웹 개발자로서 제가 이 문제를 실제로 해결한 방법은 다음과 같습니다.

으아악

네, 바로 그거예요. HTML에서 인라인 블록 요소 사이의 공백을 제거했습니다.

쉽습니다. 이것은 매우 간단합니다. 그것은 어디에서나 작동합니다. 이것은 실용적인 솔루션입니다.

때로는 공백이 어디서 오는지 신중하게 생각해야 합니다. JavaScript를 사용하여 다른 요소를 추가하면 공백이 추가됩니까? 아니요, 올바르게 수행하면.

마법의 여행을 떠나 새로운 HTML을 사용하여 공백을 제거하는 다양한 방법에 대해 알아봅시다:

으아악

• 내가 평소에 하던 일을 하시면 됩니다:

  으아악

http://jsfiddle.net/thirtydot/dGHFV/1362/

• 또는 이렇게 하세요:

  으아악

• 또는 댓글을 사용하세요:

  으아악

• 또는 PHP나 이와 유사한 것을 사용하는 경우:

  으아악

• 또는 특정 닫는 태그를 완전히 생략 할 수도 있습니다(모든 브라우저에서 지원됨).

  으아악

이제 "30dot의 공백을 제거하는 수천 가지 방법"이 지루해졌으니 잊어버리셨기를 바랍니다 font-size: 0.