CSS로 그림 하단 공백 문제 해결 방법

문제 설명:

사진을 인용할 때 아래 사진처럼 항상 아래에 공백이 생깁니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!