div 사이에 틈이 있고 img와div 사이에 틈이 있는 원인 및 해결 방법
div에는 display: inline-block 속성 때문에 img 탭이 존재합니다.
display: inline-block 레이아웃의 요소는 크롬 아래에서 몇 픽셀의 간격이 생길 수 있습니다. 왜냐하면 우리가 편집기에서 코드를 쓸 때 같은 등급의 라벨을 같은 줄에 쓰지 않아서 코드의 정연한 가독성을 유지합니다. 즉, inline-block 레이아웃의 요소는 편집기에서 같은 줄에 있지 않고 줄 바꿈 문자가 존재하기 때문입니다. 그래서 이것이 바로 유명한 inline-block'줄 바꿈/공백 간격 문제'입니다.만약 inline-block 요소 사이에 빈칸이 있거나 줄을 바꾸는 데 빈틈이 생기면 그것은 정상적인 것이고 마땅한 것이다.공백과 간격이 없어야 비정상적입니다(IE6/7 Block 수평 요소).
해결 방법:
1. img 태그의 display 속성을 Block으로 변경합니다.
img{dispaly:block;}2. div의 글꼴 크기를 0으로 설정합니다.
div{font-size:0;}3. img의vertical-align 속성을 수정합니다.
img{vertical-align:buttom;}
img{vertical-align:middle;}
img{vertical-align:top;}전재 대상:https://www.cnblogs.com/vanstrict/p/4961300.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
