>웹 프론트엔드 >JS 튜토리얼 >인라인 블록 attribute_javascript 기술로 인해 발생하는 태그 간 간격을 제거하는 방법

인라인 블록 attribute_javascript 기술로 인해 발생하는 태그 간 간격을 제거하는 방법

WBOY
WBOY원래의
2016-05-16 15:07:071465검색

1. 인라인 블록 요소의 상위 요소를 설정합니다.

상위 요소의 글꼴 크기를 0;으로 설정합니다. 하위 요소의 글꼴 크기를 적절한 크기로 설정합니다. 하위 요소의 글꼴 크기가 설정되지 않은 경우 하위 요소는 상위 요소의 0을 상속합니다.

2. 인라인 블록 요소의 상위 요소를 설정합니다. (letter-spacing : 글자간격)


상위 요소의 문자 간격을 -4px 또는 -8px로 설정합니다. Google을 제외하면 -8px이고 나머지는 -4px입니다. 또한 하위 요소의 문자 간격을 0으로 설정합니다. 그렇지 않으면

입니다.

상위 요소를 상속하여 하위 요소의 텍스트가 변형됩니다.


테스트 후 -8px로 설정했는데, 이것이 가능한지 모르겠습니다. 의견이 있으시면 말씀해 주세요.


3. 인라인 블록 요소의 상위 요소를 설정합니다. (단어 간격: 단어 간격)


상위 요소의 단어 간격을 -4px 또는 -8px로 설정하고, Google, 360은 -8px, Firefox, IE는 -4px로 설정합니다. 또한 하위 요소의 word-spacing: 0을 설정합니다. 그렇지 않으면 상위 요소를 상속하여 하위 요소의 텍스트가 변형됩니다.


위와 동일하게 -8px로 설정할 수도 있습니다


4. 위의 테스트는 Google, Firefox, 360 모두 최신 브라우저인 IE8에서 테스트되었습니다. 잘못된 점이 있으면 알려주시기 바랍니다.


위 내용은 편집자가 소개한 inline-block 속성으로 인해 발생하는 태그 간 간격 문제입니다. 모든 분들께 도움이 되었으면 좋겠습니다!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.