HTML에서 공백 무시

HTML에서 공백 무시

---

이 질문에는 이미 답변이 있습니다.

• 인라인 블록 요소 사이의 공백을 어떻게 제거합니까? 답변 38 개

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>

---

당신은 설정할 수 font-size의 컨테이너 에 0와 white-space사라!

---

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

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

CSS를 사용하여 이미지를 블록 요소로 만들고 서로 옆에 띄울 수 있습니다. 이렇게하면 이미지 사이의 간격과 이미지 아래의 텍스트 줄 간격 사이의 많은 문제를 해결할 수 있습니다.

---

불행하게도 줄 바꿈은 공백 문자로 계산됩니다.

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

  <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" />

나도 이상적이지 않다. 그러나 적어도 공간 문자가 렌더링되거나 상대 위치 지정 또는 JavaScript에 의존하는 크기에 의존하는 기괴한 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하려면 flexbox 컨테이너 에 추가 하는 것을 잊지 마십시오 .

---

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

좋아, 나는 이것이 웹킷 (특히 QT에 포함 된 것)에서 작동하게하는 것에 대해 걱정해야하므로 Chrome 및 Safari에서도 작동한다는 점에서 운이 좋을 수도 있습니다. 보이는 것처럼 공백의 단점이없는 display: table-cell표시의 모든 장점을 가지고 있습니다 inline-block(들여 쓰기 된 td를 생각하십시오)

---

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

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>

---

이미지는 기본 인라인 요소이므로 이미지 사이에 공백이 표시됩니다. 스크린 리더에서 예제를 들으면 공백이없는 이유를 즉시 알 수 있습니다.

내 미니 일 내 미니 일 내 미니 일 내 미니 일

따라서 my mini thing.대체 텍스트로 (끝에 공백과 공백을 추가하여) 사용하거나 CSS를 사용하여 이미지를 함께 밀어 넣으십시오. 코드에서 공백을 제거하지 마십시오.

---

php 사용하는 경우 훌륭하게 작동합니다. 여기 에서 해결책을 찾았습니다 .

원래는 simplexml 과 같은 HTML 로 whitespace구문 분석 한 후에 만 구성된 텍스트 노드를 제거 할 것을 찾고 있었지만 훨씬 저렴합니다.

<?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 변형에 공백이없는 것을 선호합니다. drupal을 CMS로 사용하면 template.php와 테마 파일에서 쉽게 얻을 수 있습니다. 그런 다음 인라인 블록을 선택합니다.

추신 : 인라인 블록은 다른 브라우저에 들어가기가 다소 복잡합니다. FF 2의 경우 -moz-inline-box를 표시해야합니다. 나머지와 IE8은 다음과 같은 인라인 블록을 표시 할 수 있습니다. 그리고 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 */
}

---

이 CSS를 사용해보십시오 :

img { display: table-cell; }

---

HTML을 축소하십시오!

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

따라서 공백이 필요하지 않고 (을 사용하여 하드 코딩 한 경우가 아니면  ) 축소 프로세스에서 공백을 항상 제거하십시오.

참고 URL : https://stackoverflow.com/questions/2628050/ignore-whitespace-in-html