내 인라인 차단 목록 항목에 원하지 않는 여백이 있는 이유는 무엇입니까?

인라인 블록 목록 항목의 원치 않는 여백

HTML 레이아웃이 인라인 블록 요소 목록으로 구성된 시나리오에서는 다음을 수행할 수 있습니다. 목록 항목 주위에 원치 않는 여백이 나타납니다. 이 문제를 해결하려면 원인을 이해하고 적절한 해결책을 찾는 것이 중요합니다.

여백의 원인:

디스플레이 사용으로 인해 발생하는 문제는 다음과 같습니다. 목록 항목에 대한 인라인 블록. 인라인 블록 요소는 본질적으로 공백을 생성하므로 각 요소 오른쪽에 4px 여백이 생깁니다.

해결책 1: 부동 소수점으로 변환: 왼쪽;

간단히 부동 표시 속성: 목록 항목에 대해 왼쪽으로 원하지 않는 항목을 제거합니다. margin.

li {
    float: left;
    ...
}

해결책 2: 목록 항목 태그 연결

또는 목록 항목 태그를 단일 항목에 연결하여 공백을 제거할 수 있습니다. line.

• 첫 번째
• 첫 번째
< ;li>
첫 번째
• 첫 번째

해결책 3: 블록 태그 제거

또 다른 옵션은 목록 항목 내의 블록 태그를 제거하여 모든 콘텐츠가 단일 항목에 렌더링되도록 하는 것입니다. 줄:

• 첫 번째