HTML에서 공백 무시

HTML에서 공백 무시

이 질문에는 이미 다음과 같은 답이 있습니다.

인라인/인라인 블록 요소 사이의 공간을 제거하는 방법은 무엇입니까? (41개 답변)

마감됨8년 전에.

HTML/CSS에 브라우저가 공백을 완전히 무시하도록 지시하는 내용이 있습니까?

예를 들어, 두 개의 이미지를 나란히 놓고 싶을 때, HTML을 읽을 수 있도록 필사적으로 노력하지만 브라우저는 두 이미지 사이에 공간을 둡니다.

그래서 이런 것 대신에:

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

당신은 결국 이것으로 끝납니다.

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

그건 정말 끔찍해요!

오, 당신은 CSS 한 줄로 그것을 정말 쉽게 달성할 수 있습니다.

#parent_of_imgs { white-space-collapse: discard; }

불리한 점이 있나요?이처럼 매우 유용한 기능(인라인 블록을 일반적으로 생각)을 구현한 브라우저는 아직 없습니다. :-(

제가 가끔 한 일은 밤이 어두워서 못생겼지만, 댓글을 사용하는 것입니다.

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

▁the를 설정할 수.font-size컨테이너의 ~에.0 리고그고.white-space사라집니다!

대부분의 경우 블록 요소 옆에 있는 브라우저는 공백을 무시합니다.

이미지(이 경우)의 문제는 이미지가 인라인 요소이기 때문에 별도의 줄에 이미지를 작성할 때 실제로는 같은 줄에 있는 요소이며 줄 바꿈이 공백으로 간주됩니다.브라우저가 이미지 사이의 공백을 제거하는 것은 올바르지 않습니다. 이미지 태그를 줄 바꿈으로 작성하는 것은 이미지 태그를 공백으로 동일한 줄에 작성하는 것과 동일한 방식으로 처리해야 합니다.

CSS를 사용하면 이미지들이 요소들을 차단하고 서로 옆으로 띄우게 할 수 있습니다. 이는 이미지들 사이의 공간과 이미지 아래의 텍스트 라인의 공간과 같은 간격과 관련된 많은 문제를 해결할 수 있습니다.

의 해결책은 이를위같다습다니음과은솔루션최신한다를 사용하는 입니다.display: flex외부 컨테이너에서 다음 예를 사용하여 이를 시도할 수 있습니다.

코데펜 →

(그리고 그렇습니다. Flexbox는 널리 지원되고 있습니다. http://caniuse.com/ #search=flexbox)

HTML:

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.box {
  display: flex;
  display: -webkit-flex;    
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}

업데이트: 또한 표준 인라인 블록 요소처럼 항목을 래핑하려면 추가하는 것을 잊지 마십시오.flex-wrap: wrap플렉스박스 컨테이너로 이동합니다.

불행하게도, 새로운 선은 공백 문자로 계산됩니다.

제가 생각해낸 가장 좋은 해결책은 외부 대신 태그 내부의 공백을 사용하는 것입니다.

  <img src="images/minithing.jpg" alt="my mini thing" 
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />

그것도 이상적이지 않아요, 알아요.하지만 적어도 공간 문자가 렌더링되는 크기에 의존하거나 상대적인 위치 지정 또는 자바스크립트에 의존하는 이상한 CSS 해킹은 아닙니다 :)

이 솔루션의 무엇이 그렇게 어려웠습니까?

CSS

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

html

<span class="no-whitespace">

    <a href=# title='image 1'>
       <img src='/img/img1.jpg' alt='img1'/>
    </a>

    <a href=# title='image 2'>
       <img src='/img/img2.jpg' alt='img2'/>
    </a>

    <a href=# title='image 3'>
       <img src='/img/img3.jpg' alt='img3'/>
    </a>

</span>

<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

좋아요, 저는 이것이 크롬과 사파리에서도 작동하는 웹킷(특히 QT에 내장된 것)에서 작동하는 것에 대해 지금 당장 걱정하면 된다는 점에서 운이 좋을 수도 있습니다.보다이인 것 .display: table-cell에는 다음과 같은 디스플레이의 모든 이점이 있습니다.inline-block하지만 공백 단점은 없습니다(인덴티드 TD를 생각해 보세요).

이미지는 기본 인라인 요소 단위이므로 이미지 사이에 공백이 표시됩니다.화면 판독기에서 예를 들어보면 그 이유를 즉시 알 수 있습니다. 공백이 없으면 다음과 같은 소리가 들립니다.

나의 미니싱 나의 미니싱 나의 미니싱 나의 미니싱

그래서, 사용합니다.my mini thing.(마지막에 점과 공백을 더함)을 alt 텍스트로 사용하거나 CSS로 이미지를 함께 밀어넣습니다.코드에서 공백만 제거하지 마십시오.

만약 당신이 php를 사용하고 있다면, 이것은 훌륭하게 작동합니다.여기서 해결책을 찾았습니다.

나는 원래 다음으로만 구성된 텍스트 노드를 제거할 무언가를 찾고 있었습니다.whitespacesimplexml과 같은 것으로 html을 구문 분석한 후, 하지만 이것은 훨씬 저렴합니다.

<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
    <img src='./mlp.png'/>
    <img src='./dbz.png'/>
    <img src='./b10af.png'/>
    <img src='./fma.png'/>
<?ob_end_flush;?>

이것은 간단한 질문이고 답은 그렇게 간단하지 않습니다.

소스 코드의 공백은 시스템에 의해 자동으로 삽입되기 때문에 CMS에서 항상 달성할 수 있는 것은 아닙니다.이를 변경하려면 CMS의 핵심 코드를 깊이 파야 합니다.

그런 다음 왼쪽 플로팅 이미지를 사용할 수 있습니다.하지만 이것은 위험합니다.처음에는 수직 정렬을 정의에 따라 제어할 수 없습니다.그리고 두 번째로, 떠다니는 요소들이 너무 많아서 하나 이상의 선으로 늘어나게 되면 완전히 혼란에 빠지게 됩니다.그리고 왼쪽 부동 요소에 의존하는 레이아웃(오늘날 대부분이 그러함)이 있는 경우 이미지 후 부동을 지운 경우 일부 외부 부동 스타일을 해제할 수도 있습니다.주변 요소를 플로팅하는 경우 이 값을 재정의할 수 있습니다.차라리 추천받지 않는 것이 좋습니다.

따라서 유일한 해결책은 공백 처리 프로세스를 처리하는 CSS 선언입니다.이것은 어떤 표준의 일부가 아닙니다 (CSS 3이 아직 끝나지 않았기 때문에).

저는 HTML 변형에서 공백이 없는 것을 선호합니다.CMS로 Drupal을 사용하면 템플릿에서 이 작업을 쉽게 수행할 수 있습니다.php 및 주제 파일.그런 다음 인라인 블록을 선택합니다.

추신: 인라인 블록은 다른 브라우저에 들어가기에는 다소 복잡합니다.FF 2의 경우 디스플레이: -moz-in-line-box가 필요합니다.나머지와 IE8은 바로 뒤에 인라인 블록을 표시할 수 있습니다.그리고 LTE IE 7의 경우, 디스플레이가 필요합니다. 다음의 별도 선언에 인라인으로 표시됩니다(가능하면 조건부 설명을 사용하는 것이 좋습니다).

편집을

요소를 인라인 블록으로 만드는 데 사용하는 항목

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}

HTML을 최소화합니다!

응답이 브라우저에 렌더링되기 전에 응답을 최소화하는 것이 좋습니다.

따라서 공간이 필요하지 않은 경우(그리고 사용하여 하드 코딩한 경우 ), 축소 프로세스에서 항상 공백을 제거합니다.

다음 CSS 사용:

img { display: table-cell; }

언급URL : https://stackoverflow.com/questions/2628050/ignore-whitespace-in-html