Có một khoảng cách 4px dưới vải/video/yếu tố âm thanh trong HTML5

Khi sử dụng HTML5, nếu bạn đặt một yếu tố canvas/video/audio/svg trong một div, sẽ có một khoảng cách 4px dưới đây những yếu tố này. Tôi đã thử nghiệm mã bên dưới trong hầu hết các trình duyệt hỗ trợ HTML5, tiếc là tất cả các trình duyệt đều có cùng một vấn đề.Có một khoảng cách 4px dưới vải/video/yếu tố âm thanh trong HTML5

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bug</title> 
</head> 
<body> 
<div style="border: 1px solid blue"> 
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas> 
</div> 
</body> 
</html>

Nguồn

2011-12-22 user994778

Đó là bởi vì họ là những yếu tố nội tuyến với thay đổi kích thước height (hầu hết inline yếu tố này là không rõ ràng thay đổi kích thước). Nếu bạn đặt chúng thành display: block; khoảng cách sẽ biến mất. Bạn cũng có thể đặt vertical-align: top; để đạt được kết quả tương tự.

Demo: http://jsfiddle.net/ThinkingStiff/F2LAK/

HTML:

<div class="container"> 
    <canvas width="200" height="100"></canvas> 
</div> 
<div class="container"> 
    <canvas id="block" width="200" height="100"></canvas> 
</div>

CSS:

.container { 
    border: 1px solid blue; 
} 

canvas { 
    border: 1px solid red; 
} 

#block { 
    display: block; 
}

Output:

enter image description here

Nguồn

2011-12-22 07:44:00 ThinkingStiff

Cảm ơn bạn rất nhiều! Nhưng nếu được đặt thành {display: inline-block}, khoảng trống sẽ xuất hiện trở lại. Tại sao hành vi của các yếu tố này lại khác với các yếu tố nội tuyến khác? – user994778

'img' hoạt động theo cùng một cách. Đó là các phần tử 'inline' có thể thay đổi kích thước' chiều cao'. 'vertical-align: top;' sửa vấn đề nếu bạn muốn giữ nguyên tố 'inline'. – ThinkingStiff

{vertical-align: top;} Đây thực sự là điều tôi muốn! Bạn thật tuyệt vời! – user994778

Margin 5px đang làm việc trong Firefox.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bug</title> 
</head> 
<body> 
<div style="border: 1px solid blue"> 
<canvas width="200" height="100" style="border: 1px solid yellow; margin-bottom:-5px"></canvas> 
</div> 
</body> 
</html>

Nguồn

2011-12-22 07:16:59 Teg

Cảm ơn bạn đã trả lời của bạn. Tôi tự hỏi tại sao tất cả các trình duyệt đều có vấn đề tương tự? Tôi không thể tìm thấy bất kỳ kiểu mặc định nào về điều đó. – user994778

Tôi thừa nhận rằng tôi không biết .. – Teg

Lưu ý, rằng nó là 5px trong trường hợp này bởi vì bạn đã thiết lập một đường viền với độ dày 1px, vì vậy nếu bạn loại bỏ biên giới, nó chỉ có 4px. Dù sao, giải pháp đó dường như là loại bẩn, tôi thích dọc-align: top; - phương thức trong câu trả lời được chấp nhận nhiều hơn :). –

Có một khoảng cách 4px dưới vải/video/yếu tố âm thanh trong HTML5

Trả lời

Các vấn đề liên quan