Khi một phần tử con tràn qua chiều ngang, tại sao phần đệm phải của phụ huynh bị bỏ qua?

Question

Với cấu trúc đơn giản này:

<div id="parent"> 
    <div id="child">Lorem ipsum</div> 
</div> 

với CSS này:

#parent { 
    width: 200px; 
    height: 200px; 
    padding: 20px; 
    overflow-x: scroll; 
} 

#child { 
    width: 500px;  
} 

Live Demo:http://jsfiddle.net/523me/5/

ý rằng phụ huynh có đệm 20px và rằng đứa trẻ tràn theo chiều ngang (bởi vì nó rộng hơn). Nếu bạn di chuyển cha mẹ tất cả các con đường bên phải, bạn sẽ thấy rằng đứa trẻ chạm vào cạnh phải của phụ huynh.

Vì vậy, cha mẹ phải có đệm đúng, nhưng nó bị bỏ qua. Dường như khi trẻ có chiều rộng cố định, phần đệm bên phải của bố mẹ không áp dụng. (Điều này có được chỉ định bởi một tiêu chuẩn không? Tôi rất muốn biết. Vui lòng cho tôi biết nếu bạn tìm thấy bất kỳ điều gì!)

Có cách nào để ép buộc phải áp dụng trong trường hợp này mà không cần của các yếu tố từ dòng chảy (bằng cách thả nổi hoặc định vị)?

Ảnh chụp màn hình 1 - Đệm phải được bỏ qua. Đây là cách tất cả các trình duyệt hiện hành xử lý.

Ảnh chụp màn hình 2 - Áp dụng đệm phù hợp. Đây là những gì tôi đang cố gắng hoàn thành. (Btw, ảnh chụp màn hình là từ IE7, đó là trình duyệt duy nhất mà không bỏ qua các đệm bên phải.)

Answer 1

Bạn đang bị this vấn đề.

tôi sẽ giải quyết nó bằng cách đưa ra một biên độ cho đứa trẻ (và không phải là một đệm để công ty mẹ):

#parent { 
    width: 200px; 
    height: 200px; 
    overflow-x: scroll; 
    background: gray; 
} 

#child { 
    width: 500px; 
    background: yellow; 
    display: inline-block; 
    margin: 20px; 
} 

Demo: jsFiddle

Answer 2

Dunno nhưng nói thêm:

#child{ 
    display: inline-block; 
} 

vẻ để sửa chữa nó: http://jsfiddle.net/523me/6/

tôi chỉ được thử nghiệm trong Chrome mới nhất, có thể không phải là trình duyệt chéo

Answer 3

Bạn có thể thay đổi phần đệm thành đường viền.

padding: 20px; 

để

border: 20px solid gray; 

Answer 4

Không, đệm không được bỏ qua, nhưng nó vẫn còn bên cha mẹ.

Xem updated jsFiddle, nơi bạn có thể thấy rằng phần đệm không di chuyển từ vị trí ban đầu của nó.

Chỉnh sửa: Hm, có một số bất thường. Nếu bạn cho div bên trong một lề phải, điều đó cũng bị bỏ qua. Hm. Upvoting câu hỏi của bạn.

Answer 5

Áp dụng padding-right để tự tràn phần tử và di chuyển nền tới phần tử con trực tiếp của nó.

<div id="parent"> 
    <div id="child"><div>Lorem ipsum...</div></div> 
</div> 

<style> 
#parent {padding-right: 0; } 
#child {padding-right: 20px; } 
#child > DIV {background: yellow; } 
</style> 

http://jsfiddle.net/523me/9/