H5에서 사진의 공백을 해결하는 방법

이번에는 H5에서 그림 공백을 해결하는 방법과 H5 그림의 공백을 해결하기 위한 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

최근 h5 프로젝트를 진행하면서 여러 img 태그

사이에 약 3px 정도의 간격이 있는 문제를 발견했습니다. 나중에 Baidu에서 확인해보니 브라우저의 요소가 처리되었기 때문이었습니다. 단어로, 정렬 후에도 약간 커지는 일부 문자(예: j, g)에 대해 공백이 예약되어 있습니다. 또한 개인 테스트에 적합한 몇 가지 솔루션도 찾았습니다.

1. 본문의 font-size를 0으로 설정하세요.

이 작업을 수행할 때 아래 div를 작성할 때 요소의 글꼴 크기를 지정해야 합니다.

2.

<img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="H5에서 사진의 공백을 해결하는 방법" >
  <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"    alt="H5에서 사진의 공백을 해결하는 방법" >
  <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="H5에서 사진의 공백을 해결하는 방법" >

를

<img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="H5에서 사진의 공백을 해결하는 방법" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"   alt="H5에서 사진의 공백을 해결하는 방법" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="H5에서 사진의 공백을 해결하는 방법" >

로 작성합니다. 즉, 중간에 공백 없이 img 태그를 작성합니다.

이 사례를 읽고 나면 방법을 익힐 수 있을 것입니다. , PHP 중국어 웹사이트의 기타 관련 기사를 주목해주세요!

관련 읽기:

H5에서 비디오 및 오디오 태그와 진행률 표시줄을 사용하는 방법

H5 및 C3의 새로운 대화형 기능은 무엇입니까

H5의 블록 수준 태그 요약

위 내용은 H5에서 사진의 공백을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!