줄 바꿈을 사용할 때 HTML 요소 사이의 공백 제거

약 10 img초의 행이있는 페이지가 있습니다. HTML의 가독성을 위해 각 img태그 사이에 줄 바꿈을 삽입하고 싶지만 그렇게하면 이미지 사이에 공백이 렌더링되므로 원하지 않습니다. 태그 사이가 아닌 중간에서 끊어지는 것 외에 할 수있는 일이 있습니까?

편집 : 여기에 내가 지금까지 가지고있는 스크린 샷이 있습니다. 책 등뼈 이미지를 PHP를 사용하여 임의의 조합으로 표시하고 싶습니다. 이것이 별도의 img태그 가 필요한 이유 입니다.

CSS를 사용할 수 있습니다. 이미지에서 display : block 또는 float : left를 설정하면 자신 만의 간격을 정의하고 원하는대로 HTML 형식을 지정할 수 있지만 적절하지 않을 수도있는 방식으로 레이아웃에 영향을줍니다.

그렇지 않으면 인라인 콘텐츠를 다루므로 HTML 형식이 중요합니다. 이미지가 효과적으로 단어처럼 작동하기 때문입니다.

이것이 오래 되었다면 미안하지만 방금 해결책을 찾았습니다.

font-size를 0으로 설정해보십시오. 따라서 이미지 사이의 공백은 너비가 0이되며 이미지에는 영향을주지 않습니다.

모든 브라우저에서이 작품,하지만 난 크롬 및 일부 그것을 시도 알고하지 마십시오 <li>을 가진 요소 display: inline-block;.

주석을 사용할 수 있습니다.

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

그래도 일련의 이미지가 나란히있는 의미에 대해 걱정할 것입니다.

CSS로 대략적인 작업을 수행하지 않고 두 가지 옵션이 있습니다. 첫 번째 옵션은 자바 스크립트를 사용하여 태그에서 공백 만있는 하위 항목을 제거하는 것입니다. 그러나 더 좋은 옵션은 공백이 의미없이 태그 내부에 존재할 수 있다는 사실을 사용하는 것입니다. 이렇게 :

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Flexbox는이 오래된 문제를 쉽게 해결할 수 있습니다.

.image-wrapper {
  display: flex;
}

flexbox에 대한 추가 정보 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

너무 많은 연구, 시행 착오 끝에 나는 잘 작동하는 것처럼 보이고 자식 요소에서 수동으로 글꼴 크기를 수동으로 다시 설정할 필요가 없어 전체 문서에서 표준화 된 em 글꼴 크기를 가질 수있는 방법을 찾았습니다. .

Firefox에서 이것은 매우 간단 word-spacing: -1em합니다. 부모 요소에 설정하기 만하면됩니다 . 어떤 이유로 Chrome은 이것을 무시합니다 (그리고 내가 테스트 한 한 값에 관계없이 단어 간격을 무시합니다). 그래서 이것 외에 나는 letter-spacing: -.31em부모와 letter-spacing: normal자녀에게 추가 합니다 . 전각의이 부분은 전각 크기가 표준화 된 경우에만 공간의 크기입니다 . Firefox는 글자 간격에 대한 음수 값을 무시하므로 단어 간격에 추가하지 않습니다.

Firefox 13 (win / ubuntu, 14 on android), Google Chrome 20 (win / ubuntu), Android Browser on ICS 4.0.4 및 IE 9에서 테스트했습니다. 그리고 Safari에서도 작동 할 수 있다고 말하고 싶습니다. 하지만 잘 모르겠어요 ...

데모 http://jsbin.com/acucam

나는 너무 늦었지만 (방금 질문하고 관련 섹션에서 얇은 것을 발견했습니다) display : table-cell; 더 나은 솔루션입니다

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

유일한 문제는 IE 7 및 이전 버전에서는 작동하지 않지만 해킹으로 해결할 수 있다는 것입니다.

이 문제를 해결하려면 다음 코드와 같이 CSS 스타일 시트를 사용하십시오.

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

대체 텍스트 http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnnoPLy/Capture.PNG

Firefox 3.5 Final에서 테스트 중!

추신. 당신의 html은 이것과 같아야합니다.

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

태그 사이가 아닌 중간에서 끊어지는 것 외에 할 수있는 일이 있습니까?

별로. <img>s는 인라인 요소 이므로 HTML 렌더러에서는 이러한 요소 사이의 공백을 텍스트의 실제 공백으로 간주합니다. 중복 공백 (및 줄 바꿈)은 잘리지 만 단일 공백 은 잘립니다. 텍스트 요소의 문자 데이터에 삽입됩니다.

<img>태그를 배치하면 절대적으로 이것을 방지 할 수 있지만, 이것은 많은 작업이 될 수있는 일부 픽셀 측정 값에 각 이미지를 수동으로 배치하는 것을 의미하므로 이에 대해 권장하지 않습니다.

또 다른 해결책은 공간에 틀에 박힌 줄 바꿈을 사용하는 것입니다. 이것은 첫 번째 몇 가지 답변과 유사하며 요소를 정렬하는 다른 방법입니다. 또한 마크 업의 공백을 캐리지 리턴으로 대체하기 때문에 최고 가장자리 최적화 기술입니다.

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

해당 코드에는 공백이 없습니다. HTML에서 일반적으로 공백이 사용되는 위치는 캐리지 리턴으로 대체됩니다. 주석을 사용하고 Paul de Vrieze가 권장하는 것처럼 공백을 사용하는 것보다 덜 장황합니다.

이 접근 방식에 대해 tech.co에 감사드립니다.

공백 : 초기; 나를 위해 작동합니다.

요소 사이의 공백은 시각적 서식 지정을 위해 HTML 편집기에 의해서만 배치됩니다. jQuery를 사용하여 공백을 제거 할 수 있습니다.

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

이렇게하면 자식 요소가 분리되고 자식 요소를 다시 추가하기 전에 남아있는 모든 공백이 지워집니다.

이 질문에 대한 다른 답변과 달리이 방법을 사용하면 상속 된 CSS display및 font-size값이 유지됩니다. 또한 사용할 필요가 없으며 float번거로운 작업 clear이 필요합니다. 물론 jQuery를 사용해야합니다.

개인적으로 나는 어떤 형태의 트릭을 사용하지 않는 것이 아니라 정확한 방법이 없다는 대답을 좋아합니다.

나에게 그것은 때때로 성가신 문제로, 예를 들어 한 행의 체크 박스가 모두 올바르게 정렬되지 않은 이유를 궁금해하는 시간을 낭비하게 만들 수 있습니다. 따라서 저는 빠른 Google과 직접 CSS 규칙이 있는지 확인해야했습니다. 내가 기억하지 못했지만 ...

다음 베스트 답변은 글꼴 크기를 사용하는 것입니다 ... 나에게 이것은 텍스트가 표시되지 않는 이유를 나중에 궁금해하는 불쾌한 해킹입니다.

나는 일반적으로 PHP로 많이 개발하고 체크 박스 그리드를 생성하는 경우 PHP 생성 콘텐츠는 공백 / 바꿈을 삽입하지 않으므로이 문제를 제거합니다.

간단히 말해서, 한 줄에있는 모든 이미지를 함께 처리하거나 서버 측 스크립트를 사용하여 콘텐츠 / 이미지를 생성하는 것이 좋습니다.

요소 사이의 CR / LF를 제거하는 데 사용하는 대신 축소자가 종종 주석을 제거하지만 XML PI는 제거하지 않기 때문에 SGML 처리 명령을 사용합니다. PHP PI가 PHP에 의해 처리 될 때, 그 사이에 CR / LF와 함께 PI를 완전히 제거하여 최소 8 바이트를 절약 할 수있는 추가적인 이점이 있습니다. X (HT) ML에 2 바이트 저장과 같은 임의의 유효한 명령어 이름을 사용할 수 있습니다.

Quentin의 답변 에서 영감을 받아 다음 태그의 시작 부분에 닫기>를 배치 할 수도 있습니다.

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

의미 상으로는 순서가 있거나 순서가없는 목록을 사용한 다음 CSS를 사용하여 적절하게 스타일을 지정하는 것이 가장 좋지 않을까요?

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

CSS를 사용하면 원하는 방식으로 스타일을 지정하고 책 사이의 공백을 제거 할 수 있습니다.