스팬의 선 높이가 왜 쓸모가 없습니까?

스팬의 선 높이가 왜 쓸모가 없습니까?

---

먼저 코드를 살펴 보겠습니다.

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7;  }

<div><span>123<br>456<br>789<br>000</span></div>

이유는 span의 line-height사용하지 않는?

은 line-height여전히 200px있지만, 우리가 설정 한 경우 span의 display에 속성을 inline-block의 line-height의가 span사용됩니까?

아래 참조 :

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }

<div><span>123<br>456<br>789<br>000</span>

---

div기본적으로 is 와 같이 블록 레이아웃 은 라인 상자 의 수직 스택으로 구성되며, 사이에 공간이없고 겹치지 않습니다. 각 라인 상자 는 블록에 지정된 라인 높이의 높이 인 가상의 인라인 상자 인 스트럿으로 시작 합니다. 라인 상자는 라인 높이에 따라 마크 업의 인라인 상자와 함께 계속됩니다.

아래 다이어그램은 첫 번째 예의 레이아웃을 보여줍니다. 글꼴 높이의 1.7 배는 스트럿의 높이보다 훨씬 작기 때문에 줄 상자에 인라인 상자가 완전히 포함되어야하므로 줄 높이는 스트럿의 높이에 따라 결정됩니다. 의 줄 높이를 span200px보다 크게 설정했다면 줄 상자가 더 길어지고 텍스트가 더 멀리 떨어져있는 것을 볼 수 있습니다.

당신이 할 때 span인라인 블록을 사이의 관계 div와는 span변경되지 않지만, 스팬 이익은 라인 박스의 고유 한 스택과 함께 자신의 블록 레이아웃 구조입니다. 따라서 텍스트와 줄 바꿈은이 내부 스택 내에 배치됩니다. 내부 블록의 스트럿은 글꼴 높이의 1.7 배입니다. 즉, 텍스트와 동일하며 레이아웃은 이제 아래와 같이 보이므로 텍스트 줄이 서로 더 가깝게 배치되어 span.

(두 다이어그램은 다른 척도에 있습니다.)

---

이것은 의도적으로 설계된 것입니다. HTML 문서에는 블록과 인라인의 두 가지 요소 유형이 있습니다. 인라인 요소는 문서의 흐름을 방해하지 않지만 블록 요소는 방해합니다.

Block elements, as the name suggests, block out an area on the page which contains some content. Some examples of block elements are: <p> and <div>. You can apply height, line-height and other CSS properties to these elements in order to change the size of the block, and subsequently, the flow of the document.

Inline elements take up the minimum amount of space required to render them, which means setting widths and heights on these elements will have no effect. As you've already seen, you can tell the browser to treat an inline element as a block element to allow you to apply heights to them.

이에 대한 예는 <li>요소를 사용하여 메뉴를 만들 때 볼 수 있습니다 . <li>s는 블록 요소입니다. 목록을 만들면 항목이 페이지에 세로로 표시되어 각 목록 항목이 이전 항목 아래에 표시됩니다. 그러나 display: inline;목록 항목에 적용 하면 이제 가로로 나타납니다.

참조 URL : https://stackoverflow.com/questions/11829393/why-is-the-spans-line-height-is-useless