lề không mong muốn với html rất đơn giản

Tôi có một html rất đơn giản. Div màu đỏ nằm bên trong div màu xanh và có lề trên 10 px. Trên các trình duyệt không có nghĩa là, hộp màu xanh dương cách phần đầu khung nhìn 10 px và div màu đỏ nằm ở phía trên cùng của div màu xanh lam. Những gì tôi mong đợi là hành vi tức là: div đỏ phải cách nhau 10 px so với phần đầu của div màu xanh dương. Tại sao các trình duyệt không có nghĩa là hiển thị như thế này? (Tôi cho rằng hành vi sai là của IE nhưng tại sao?)lề không mong muốn với html rất đơn giản

Và, cách chính xác để làm điều này là gì?

why blank? http://img92.imageshack.us/img92/7662/blankmr7.jpg

<html> 
<head> 
<style> 
body { margin:0; padding:0; } 
.outer 
{ 
    background-color: #00f; 
    height: 50px;  
} 
.inner 
{ 
    height: 20px; 
    width: 20px; 
    background-color: #f00; 
    margin: 10px 0 0 10px; 
} 
</style> 
</head> 
<body> 
<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 
</body> 
</html>

Nguồn

2008-11-24 Serhat Ozgel

Giống như strager's answer đã giải thích nhiều như bạn cần biết là tại sao nó xảy ra - cụ thể là nó xảy ra trong các trình duyệt khác ngoài IE vì các thông số kỹ thuật nói như vậy - Tôi nghĩ anh ta đã chọn sai câu từ phần của the CSS 2.1 specification về collapsing margins.

Điểm mà anh trích dẫn giải thích cách lề có thể sụp đổ, không phải cách chúng có thể "di chuyển" sang phần tử gốc.

Đây là thay vì những gì giải thích nó:

Nếu bên lề trên và dưới của hộp được liền kề, sau đó nó có thể cho lợi nhuận sụp đổ qua nó. Trong trường hợp này, vị trí của phần tử phụ thuộc vào mối quan hệ của nó với các phần tử khác có lề bị sụp đổ.

Nếu lề của phần tử bị sập với lề trên của phần tử gốc, cạnh viền trên cùng của hộp được xác định giống như của cha mẹ.

Hoặc, ở dạng nhẹ hơn của con người có thể đọc được trong Mozilla developer documentation:

mẹ và đứa trẻ đầu tiên/cuối cùng:

Nếu không có biên giới, đệm , nội dung nội dòng hoặc giải phóng mặt bằng để tách lề trên của một khối có lề trên của khối con đầu tiên của nó hoặc không có đường viền, đệm, nội dung nội tuyến, chiều cao, chiều cao tối thiểu hoặc tối đa ight để tách lề-dưới của một khối với lề dưới của đứa con cuối cùng của nó, sau đó các lề bị sụp đổ. Biên độ thu gọn kết thúc bên ngoài phụ huynh.

Để biết cách khắc phục, tôi có thể đi đến giải pháp overflow: autoChris Lloyd suggested (nhiều nhất có thể có tác dụng phụ).

Nhưng sau đó điều đó thực sự phụ thuộc vào chính xác phần còn lại của mã của bạn trông như thế nào. Trong ví dụ đơn giản này, bạn có thể dễ dàng chỉ cần thay đổi margin trên phần tử con thành phần đệm trên phần tử gốc.

Hoặc bạn có thể thả nổi phần tử con, hoặc hoàn toàn vị trí của nó ...

Hoặc làm thế nào về một nghịch đảo clearfix nếu bạn muốn nhận được sự ưa thích:

.outer:before { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

Nguồn

2008-11-24 23:16:03 mercator

Vâng, tôi không làm nhiều nghiên cứu trong việc trả lời câu hỏi này. Có vẻ như bạn ít lười hơn tôi. Cảm ơn bạn đã làm rõ. – strager

Tôi đã may mắn khi bạn nhận được báo giá sai hoặc tôi đã đi sâu vào các thông số kỹ thuật không có gì. ;) – mercator

Lợi nhuận đang được sáp nhập. Đầu ra được tạo ra bởi IE có lẽ là không chính xác.

Trong thông số kỹ thuật (vốn đã giảm đối với tôi vào lúc này):

Hai hoặc nhiều lề dọc liền kề hộp khối trong sự sụp đổ dòng chảy bình thường. Chiều rộng lề kết quả là độ rộng lề tối đa liền kề.

Bạn có thể sử dụng đường viền thay vì lề, với màu đường viền được đặt thành trong suốt.

Nguồn

2008-11-24 22:40:53 strager

Có một câu trả lời khá phù hợp cho câu hỏi này: overflow: auto;

<html> 
<head> 
<style> 
body { margin:0; padding:0; } 
.outer 
{ 
    background-color: #00f; 
    height: 50px; 
    overflow: auto; 
} 
.inner 
{ 
    height: 20px; 
    width: 20px; 
    background-color: #f00; 
    margin: 10px 0 0 10px; 
} 
</style> 
</head> 
<body> 
<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 
</body> 
</html>

Nguồn

2008-11-24 22:45:39

này có thể gây cuộn, mà có thể hoặc có thể không được mong muốn. -1 cho các tác dụng phụ có thể xảy ra. – strager

Trong trường hợp đó bạn có thể sử dụng overflow: hidden; –

Điều đó gây ra một tác dụng phụ khác; nếu nội dung muốn tràn thì sao? Tôi nghĩ rằng các giải pháp tràn là một lỗi trong trình duyệt bất kể; Tôi không thể thấy bất cứ điều gì trong các thông số kỹ thuật về lề tràn và không tiêu cực. – strager

Nó có thể là IE thấy DOM như div.inner có div.outer vì nó là nút cha (và tính toán bù đắp từ nó),
và các trình duyệt khác thay vì cả hai đều trả lời phần tử cơ thể?

Nguồn

2008-11-24 22:53:21

Ok, giải pháp mà không tràn auto:

<html> 
<head> 
<style> 
body { margin:0; padding:0; } 
.outer 
{ 
    background-color: #00f; 
    height: 50px; 
    border: 1px solid transparent; 
} 
.inner 
{ 
    height: 20px; 
    width: 20px; 
    background-color: #f00; 
    margin: 10px 0 0 10px; 
    padding: 0; 
} 
</style> 
</head> 
<body> 
<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 
</body> 
</html>

Yếu tố bên trong được muốn một cái gì đó để đẩy chống lại, và cung cấp một boder (hoặc buộc các trình duyệt để xem xét tràn) thực hiện điều này.

Nguồn

2008-11-24 22:55:35

vấn đề là, bây giờ bạn có đường viền trong suốt 1px :) có thể hoạt động tốt hơn nếu bạn đặt nó thành 1px vững chắC# 00f. – Jimmy

lề không mong muốn với html rất đơn giản

Trả lời

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