디스플레이 사용 분석: CSS의 인라인 블록-CSS 튜토리얼-php.cn

디스플레이 사용 분석: CSS의 인라인 블록

不言

풀어 주다： 2019-01-02 10:25:56

앞으로

15214명이 탐색했습니다.

이 문서의 내용은 CSS의 디스플레이: 인라인 블록에 대한 내용입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

The Gap of the Mystery

내비게이션 목록을 생성하고 해당 목록 항목을 인라인 블록으로 설정합니다. 주요 코드는 다음과 같습니다.

<div>
  <div><a>我</a></div>
  <div><a>我</a></div>
  <div><a>我</a></div>
</div>
.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
}

로그인 후 복사

렌더링은 다음과 같습니다.

디스플레이 사용 분석: CSS의 인라인 블록

볼 수 있습니다. 렌더링에서 목록 항목 사이에 약간의 간격이 있지만 코드에서 여백 가로 간격을 설정하지 않았습니다. 그렇다면 이러한 격차는 어떻게 발생하게 되었는가?

코드를 작성할 때 공백과 줄 바꿈을 입력하면 공백 문자가 생성되기 때문입니다. 브라우저는 공백 문자를 무시하지 않으며 브라우저는 자동으로 여러 개의 연속된 공백 문자를 하나로 병합하므로 소위 공백이 생성됩니다.

위의 예에서는 읽기 쉽도록 목록 항목 요소 사이에 캐리지 리턴과 줄 바꿈을 입력했는데, 이 공백은 이 캐리지 리턴과 줄 바꿈에 의해 생성된 공백 문자입니다.

모든 인라인 요소(인라인, 인라인 블록)와 마찬가지로 줄 바꿈으로 인해 공백 간격이 생성됩니다.

공백 문자를 제거하는 방법

위에서 우리는 공백 문자가 브라우저의 일반적인 동작임을 이해합니다. 하지만 일부 장면의 경우 아름답지 않고 간격 크기를 제어할 수 없기 때문에 이 공백을 제거해야 하는 경우가 많습니다. 일반적으로 말해서, 이 줄 바꿈으로 인한 공백을 제거하는 두 가지 방법이 있습니다. 줄 바꿈이 없는 코드와 글꼴 크기 설정입니다.

코드는 줄 바꿈되지 않습니다.

줄 바꿈은 줄 바꿈으로 인해 발생한다는 것을 배웠으므로 위 예의 목록 항목을 한 줄로 작성하면 공백이 사라지고 공백이 더 이상 존재하지 않게 됩니다. 코드는 다음과 같습니다.

<div>
  <div>导航</div>
<div>导航</div>
<div>导航</div>
</div>

로그인 후 복사

그러나 코드의 가독성과 유지 관리성을 고려하면 일반적으로 한 줄로 작성하지 않는 것이 좋습니다.

글꼴 크기 설정

우선 공백 문자는 결국 문자라는 점을 이해해야 합니다. 따라서 글꼴 크기 속성을 설정하여 생성되는 간격의 크기를 제어할 수 있습니다. 글꼴 크기가 0으로 설정되면 텍스트 문자를 표시할 수 없으며 공백 문자도 사라지고 간격도 사라진다는 것을 알고 있습니다.

따라서 이 아이디어를 따르는 또 다른 해결책이 있습니다. 상위 요소의 글꼴 크기를 0으로 설정하여 이 간격을 제거한 다음 하위 요소의 글꼴 크기를 재설정하여 하위 요소의 텍스트 문자를 복원합니다.

따라서 이 메소드의 코드는 다음과 같습니다:

.nav {
  background: #999;
  font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 为16px*/
  background: #ddd;
}

로그인 후 복사

이 메소드를 사용할 때 하위 요소의 글꼴 크기를 재설정하는 데 특별한 주의가 필요합니다. 그렇지 않으면 함정에 빠지기 쉽습니다(텍스트 표시되지 않습니다.)