2015-01-07 1 views
3

하는이 DOM에 시작 : 내게 필요한 이유이 범위에서 공간 위치가 중요합니까?

<h1><span>Lorem</span><span>Ipsum</span></h1> 

, 우리는 두 단어가 ("로렘 입숨"가 아니라 "로렘 입숨"과 같이) 인접하지 않은 있도록 공간을 추가했다. CSS (display : 블록)로 인해 일반 표시가 동일합니다. 그래서 우리는이 :

<h1><span>Lorem</span><span> Ipsum</span></h1> 

이 완전히 동일합니다 : 인해 그러나

<h1><span>Lorem</span> <span>Ipsum</span></h1> 


을 일부 자바 스크립트로,이이 더 편리 할 것? 이 방법으로 공간이 엉망이 될 수 있을까요?

+1

짧은 대답은 다릅니다. 스타일링이별로 없다면 문제가되지 않을 것입니다. 그러나 스팬이 크게 다른 스타일을 가진다면 중요 할 것입니다. – Nit

+0

왜 CSS로하지 않습니까? 하나 또는 다른''에':: before' 또는':: after' 속성을 부여하십시오. – Pointy

+1

@Pointy CSS없이 간격을 두어야합니다 (특히). –

답변

1

이 두 항목은 동일해야합니다. 공백은 inline 개체 안에있을 때 단일 공백으로 축소됩니다. <h1> 바로 아래에 있든 <span> 안에 있든 거의 같아야합니다. 가장 큰 차이점은 두 번째 경우의 공백 문자가 span 스타일에 따라 스타일이 지정된다는 것입니다.

예를 들어 HTML 4 사양의 경우 section 9.1을 참조하십시오.

+0

그래서 기본적으로 공백은 실제로 다른 문자로 취급됩니다. –

+1

공백 (공백, 탭 및 줄 바꿈)은'inline' 및'inline-block' 디스플레이 설정 중에 sinlge (깨짐) 공간으로 축소되어 렌더링됩니다. – EyasSH

-1

스팬을 동적으로 변경하려는 경우 두 공간 사이에 공간이 있으면 더 편리합니다. 그 외에는 완전히 동일합니다.

4

대답은 다릅니다.
span이 매우 다른 방식으로 스타일이 지정되지 않은 경우 아무런 차이가 없습니다.
span의 경우 h1과 인쇄상의 차이가있는 특정 스타일이있는 경우 첫 번째 샘플에는 h1, 두 번째 샘플에는 span으로 스타일이 지정되므로 표시 될 수 있습니다.

h1 { 
 
    font-size: 3em; 
 
} 
 
h1 span { 
 
    font-size: 0.5em; 
 
}
<h1><span>Lorem</span> <span>Ipsum</span></h1> 
 
<h1><span>Lorem</span><span> Ipsum</span></h1>

+0

제 경우에는 CSS가 동일하게 렌더링되었으므로 전혀 차이가 없다고 가정 할 수 있습니까? –

+1

예. Javascript로 텍스트를 다시 구문 분석해야하는 경우에는 공백이 있음을 명심하는 한, 예를 들어, 등등. – Nit

0

당신의 예제 모두 대부분의 경우 해당 될 것이다 :

차이가 서로 다른 스타일 앞으로 데려 아래의 예를 참조하십시오. 눈에 띄는 유일한 차이점은 스팬 (나는 당신이하는 것으로 가정)으로 어떤 스타일링을했는지입니다. 스타일링이 있다면 공간이 스팬 안에 있다면 스타일이 공간에 적용됩니다. 나는 개인적으로 스팬 사이의 공간이 좋기 때문에 좋아 보인다. 그러나 자바 스크립트를 작성하는 것이 더 쉽다면, 두 번째를 사용할 것이다.

관련 문제