Tôi đang cố gắng tạo ra một hộp đèn khác cần thực hành HTML/CSS/Javascript, nhưng tôi đã gặp phải một vấn đề về kiểu dáng trông tầm thường (và có thể là!) Nhưng tôi không thể giải quyết nó.Tại sao div vùng chứa nhấn mạnh hơn một chút so với nội dung IMG hoặc SVG?
Tôi có số div có chứa img. Không có vấn đề gì tôi cố gắng (border, margin, padding, chiều cao tự động, v.v.) Tôi chỉ không thể thu nhỏ div thu nhỏ để phù hợp với kích thước hình ảnh. Tôi đã giảm sự cố cho vấn đề này:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Layout experiments</title>
<style type="text/css">
#lightbox {
margin: 0;
padding: 0;
position : fixed;
left : 50%;
margin-left : -320px;
top : 100px;
border-radius: 22px;
background : #e0e0f0;
color : #102020;
}
#lightbox img {
border-radius: 15px;
}
.imagebg {
margin : 7px;
background : black;
border-radius: 15px;
height : 100%;
}
</style>
</head>
<body>
<div id="lightbox">
<div class="imagebg">
<img src="picture.jpg">
</div>
</div>
</body>
</html>
'picture.jpg' là 640x400, chênh lệch hiển thị chính nó dưới dạng dải màu đen bên dưới hình ảnh. Div tồn tại để tôi có thể làm mờ hình ảnh thành màu đen bằng cách pha trộn độ mờ của nó xuống 0, hoán đổi nó, sau đó trộn nó lại.
Tôi đã xem xét các kiểu được tính trong nhiều trình duyệt và không thể thấy ở đâu đồng bằng 4px đến từ.
Điều đó không thực sự sửa chữa nó. Bạn có thể giải thích tại sao nó tạo nên sự khác biệt? (Tôi không chịu chấp nhận - SO sẽ không để tôi cho đến khi thêm 11 phút nữa) – Chris
@Chris - đó là lý do tôi đưa cho bạn: 'img' có một dòng' chiều cao 'ngầm định được gán cho nó , cung cấp cho nó một số phòng thở đứng.Vì 'line-height' chỉ áp dụng cho các phần tử' inline', thiết lập 'img' thành' display: block' loại bỏ 'line-height'. –
@Joseph - Tôi chưa thấy phản hồi của bạn khi tôi đưa ra yêu cầu ở trên. Vì họ về cơ bản là đạt được cùng một điều chính xác trực tiếp và gián tiếp, không có nhiều lựa chọn giữa các câu trả lời. Nó chỉ có vẻ công bằng để chấp nhận câu trả lời mà đến đầu tiên, nhưng cảm ơn cho lời giải thích của bạn. – Chris