집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 줄 높이에 대한 자세한 설명(코드 예)

CSS의 줄 높이에 대한 자세한 설명(코드 예)

요소의 높이를 결정하는 것은 페이지 표시 문제를 해결하고 페이지 레이아웃을 지정하는 데 매우 도움이 됩니다. 기존 작업 성능은 블록 수준 요소의 높이 속성을 설정하는 것이며, 그러면 높이를 갖게 됩니다:

<style>
  .test {
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div class="test"></div>
</body>

그러나 우리가 알고 있듯이 요소의 높이를 설정하지 않고 요소에 콘텐츠가 있는 경우 , 요소는 여전히 높이를 얻습니다.

<style>
  .test {
    border: 1px solid #ccc;
    width: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

div가 높이를 얻는 이유는 텍스트가 높이를 지원하기 때문이 아니라 줄 높이가 div를 지원하기 때문입니다

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

The 효과는 다음과 같습니다.

CSS의 줄 높이에 대한 자세한 설명(코드 예)

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 0;
  }
</style>
<body>
  <div class="test">1</div>
</body>

상세한 결과는 높이가 없으면 줄 높이 때문에 높이가 있다는 것입니다. 라인 상자가 있습니다. 각 상자는 자연스럽게 상위 요소 높이를 지원합니다.

동시에 위의 예를 관찰하면 텍스트의 중심선과 line-height의 중심선이 동일한 위치에 있음을 알 수 있으므로 일반적으로 사용되는 중심 정렬 방법이 있습니다:

<style>
  .test {
    line-height: 100px;
    height: 100px;
  }
</style>

Line 설정 -높이와 높이를 같은 값으로 만듭니다.

결과에 따르면 사실이지만 이 문장에는 몇 가지 추가 단어가 없습니다. -텍스트를 세로로 가운데에 맞추려면 높이가 필요합니다.

위 내용은 CSS의 줄 높이에 대한 자세한 설명(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：