문제 설명:
사진을 인용할 때 아래 사진처럼 항상 아래에 공백이 생깁니다.
css 코드:
<style>
.img-box {
border: 2px solid red;
width: 550px;
}
</style>
<div class="img-box">
<img src="./img.png" alt="">
</div>원인 분석:
인라인 블록 요소는 텍스트의 기준선에 맞춰 정렬됩니다.
(추천 튜토리얼: CSS 튜토리얼)
해결책:
1. 이미지에 수직 정렬: 중간 | 하단 등을 추가하세요. (권장)
img {
vertical-align: bottom;
}2. 이미지를 블록 수준 요소로 변환합니다.
위 내용은 CSS로 그림 하단 공백 문제 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
