Div chứa canvas có lề dưới kỳ lạ là 5px

Question

Tôi đang gặp phải sự cố lạ.

trong ngắn hạn:

Khi chúng tôi đặt một canvas trong một div và thiết lập kích thước của khung hình, các div là tự động 5px lớn hơn vải trong khi tôi mong đợi nó để có được kích thước chính xác như vậy.

câu hỏi này là sau đây của this answer vì vậy tôi sẽ lấy ví dụ tương tự, sự cố đã được sao chép trong firefox và trong google chrome. (không thử các trình duyệt khác)

<div> 
    <canvas height="300px" width="200px"></canvas> 
</div> 

CSS:

div { 
    border: 2px solid blue; /* demo purposes */ 
    display: inline-block; 
} 
canvas { 
    background-color: khaki; /* demo purposes */ 
} 

kết quả (xem khoảng trắng trong div):

Bạn cũng có thể thấy điều này ví dụ giống hệt nhau (rất đơn giản) trong this JSfiddle

Tại sao điều này xảy ra và chúng ta có thể ngăn chặn nó như thế nào?

Answer 1

Bạn có thể ngăn điều đó xảy ra bằng cách thêm display: block vào css cho phần tử canvas.

ví dụ:

canvas { 
    background-color: khaki; /* demo purposes */ 
    display: block; 
}