리와 리 사이에 보이지 않는 공백의 간격은 무엇 때문에 일어난 것입니까?무슨 해결 방법이 있습니까?

이러한 공백 간격을 일으키는 원인:

브라우저의 기본 동작은 inline 요소 사이의 공백 문자 (공백 줄 바꾸기tab) 를 공백, 즉 우리 위의 코드로 렌더링하는 것입니다.
4

줄을 바꾸면 줄 바꿈 문자가 생기고 빈칸이 됩니다. 물론 빈칸은 한 문자의 폭을 차지합니다

솔루션:

방법1:

가 줄을 바꾸어서 발생한 이상

코드를 모두 한 줄에 쓸 수 있다.


"wrap">
li 탭 공백 테스트

"part1">
"part2">
"part3">
"part4">

페이지를 새로 고쳐보면 공백이 없다는 게 신기해요~
방법2: 우리는 코드의 미관과 수정의 편의를 위해

를 모두 한 줄에 쓸 수 없는 경우가 많다. 그러면 어떡하지?기왕 빈칸이 한 문자의 폭을 차지하는 바에야 차라리
안의 문자 사이즈를 0으로 설정하고 다음 스타일을 스타일시트에 넣으면 문제가 해결됩니다.

.wrap ul{font-size:0px;}

하지만 뒤따라 온 것은
의 다른 문자는 보이지 않습니다. 크기가 0px로 설정되었기 때문에, 우리는 그들을 다시 문자 크기를 설정할 수밖에 없습니다.
방법3: 원래는 방법2가 문제를 완전히 해결할 수 있다고 생각했지만 테스트를 통해 리부급 라벨 문자를 0으로 설정하여 Safari 브라우저에 간격 공백이 생겼다.문자 크기를 0으로 설정하면 안 된다면 간격을 없애고 다음 코드 교체 방법 2의 코드를 현재 테스트에서 완벽하게 해결하겠습니다.마찬가지로 리내의 문자 간격도 설정되어 있습니다. 리내의 문자 간격을 기본값으로 설정해야 합니다.

.wrap ul{letter-spacing: -5px;}

다음에 리내 문자 간격을 설정하는 것을 기억하십시오


.wrap ul li{letter-spacing: normal;}

이 문장을 자세히 보면 리와 리 사이에 보이지 않는 공백의 간격은 무엇 때문에 일어난 것입니까?무슨 해결 방법이 있습니까?

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

CSS3에 위조 클래스가 추가되었습니다. CSS3는 어떤 새로운 특성이 있습니까? 신축성 박스 레이아웃 모델은 어떻게 가운데div에 있습니까?(9)

예: p:first-of-type은 부모 원소에 속하는 첫 번째 원소의 모든 원소를 선택한다. p:last-of-type은 부모 원소에 속하는 마지막 원소를 선택한다. p:only-of-type은 부모 원소에 속하는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

리와 리 사이에 보이지 않는 공백의 간격은 무엇 때문에 일어난 것입니까?무슨 해결 방법이 있습니까?(13)

리와 리 사이에 보이지 않는 공백의 간격은 무엇 때문에 일어난 것입니까?무슨 해결 방법이 있습니까?

이러한 공백 간격을 일으키는 원인:

솔루션:

li 탭 공백 테스트

좋은 웹페이지 즐겨찾기