인라인 스팬 안의 요소에 대한 공백 표시 규칙

Question

공간이 있어야한다고 생각하는 경향이있는 이상한 문제가 있습니다. 그러나 브라우저가 문제가되는 경우가 있습니다. 최소한 display: inline-block; 내부에있는 요소에서 공백이 처리되는 방식에 대한 기본 논리를 이해할 수 없습니다. 예를 들어 : 인라인에

공간 :

<p> 
Space in an inline: This will have no<span style="display: inline-block;" class="bold"> space in it.</span> 
</p> 
<p> 
<span style="display: inline-block;">Space btw inlines: This will have a</span> <span style="display: inline-block;" class="bold"><span> space in it.</span></span> 
</p> 
<p> 
Space in the span: This will have a<span> space in it.</span> 
</p> 

는 HTML 표시를 생성이 그것에 nospace있을 것이다.

공간 btw 인라인 : 공간에 공백이 있습니다.

스팬의 공간 : 여기에는 공백이 있습니다.

몇 가지 이유로 이상합니다. 첫째, 첫 번째 경우에 no와 space 사이의 공간이 여전히 존재합니다. 복사하여 붙여 넣기하면 텍스트에 표시됩니다 (http://jsfiddle.net/gdhgmj7g/2/ 참조). 그러나 웹 페이지에는 표시되지 않습니다. 아무도 이것이 실제로 처리되는 방법에 대한 규칙을 알고 있습니까? 이 버그 또는 어떻게 든 의도 된 동작입니까? 가장 이상한 점은, 첫 번째 경우에는 범위가 있고, 내용을 복사하여 붙여 넣지 않으면 내용을 볼 수없는 것입니다. 두 번째 행은 인라인 범위 사이에 공간을두고 합리적으로 표시 할 수 있습니다. 마찬가지로 정상적인 단락 (세 번째 경우)에서는 예상대로 작동합니다. 이 문제는 IE, Firefox 및 Chrome에서 일관되게 발생하므로 일부 논리가 뒤처져 있다고 가정합니다. 그러나 나는 그것이 왜 있는지 전혀 모른다.

Answer 1

display:inline-block 인 요소는 인라인 수준의 블록 컨테이너입니다.

모든 블록 컨테이너와 마찬가지로, 수직 박스의 라인 박스로 구성됩니다. 인라인 블록 스팬의 첫 번째 경우 스택은 하나의 라인 박스 높이에 불과합니다.

white-space 규칙은 해당 라인 박스에 적용됩니다. 규칙은 진술한다 : 각 라인이 배치되기 때문에

,

1. 라인의 시작 부분에 공간 (U + 0020)이 '정상'으로 설정 '공백'을 가지고 있다면 , 'nowrap'또는 'pre-line'인 경우 제거됩니다.
2. 모든 탭 (U + 0009)은 다음 탭 정지와 함께 다음 글리프의 시작 가장자리 인 을 가로 지르는 수평 이동으로 렌더링됩니다. 탭 정지 은 블록의 글꼴 (콘텐츠 가장자리)의 시작에서 블록 글꼴로 렌더링 된 (U + 0020)의 너비의 8 배수 인 지점에서 발생합니다.
3. 줄 끝 공간 (U + 0020)를 '정상'으로 설정 '공백', '넘김', 또는 '사전 - 라인'이 발생하는 경우도 제거된다. 줄 끝 구역 (0,020 U +) 또는 탭 (0009 U +)의 '전 랩'로 설정 '공백'를 가지고 있으면
4. , 도구들은 시각적으로 축소 할 수있다.

따라서 규칙 1에서 범위의 시작 부분은 "제거"됩니다. 이것은 레이아웃 동작입니다. 해당 공간은 여전히 ​​콘텐츠에 있으므로 복사하여 붙여 넣으면 공간이 포함됩니다.

두 번째 경우에는 공백이 인라인 블록 요소 사이에 있습니다. 시작이나 끝 부분이 아니므로 공백 레이아웃 규칙에 의해 제거되지 않습니다.

세 번째 경우에는 span 요소가 기본적으로 컨테이너를 차단하지 않습니다. 그들은 선 상자 스택을 만들지 않으므로 선 상자의 시작이나 끝에는 공백이 없으므로 공백 레이아웃 규칙에 의해 제거되지 않습니다.