Margin Issue Với Extra Large Khối tử

Question

Các Margin Issue
tôi đang làm việc với các yếu tố khối lớn thêm (2000-4000px cho cả chiều rộng và chiều cao) và hầu hết các yếu tố tràn cửa sổ/viewport. Điều đó là tốt và là hiệu quả dự định của ứng dụng của tôi. Tuy nhiên, khi tôi áp dụng lề cho phần tử ở tất cả các cạnh, hãy nói 40px, nó chỉ được áp dụng cho các cạnh trên cùng, bên trái và bên dưới. Cạnh ngoài cùng bên phải là tuôn ra với cạnh của cửa sổ sau khi cuộn qua. Tôi đang tìm kiếm để có một lề thậm chí trên tất cả các mặt của phần tử khối.

Mã số
Xem bên dưới hoặc view this jsFiddle của trường hợp thử nghiệm đã giảm.

<!-- HTML --> 

<div></div> 

/* CSS */ 

* { 
    margin: 0; 
    padding: 0;  
} 

div { 
    background: #000; 
    height: 3000px; 
    margin: 40px; 
    width: 3000px;  
}​ 

gì tôi đã cố gắng
Tôi đã thử các phương pháp trên, mà tôi ban đầu cho rằng sẽ làm việc, nhưng nó thì không. Tôi cũng đã thử áp dụng một padding 40px cho phần tử body, và loại bỏ các margin từ div hoàn toàn, nhưng có cùng một kết quả. Điều tương tự cũng đúng đối với phần tử có chứa đệm được áp dụng.

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn!

Answer 1

Cách đặt div của bạn thành phần tử chặn nội tuyến.

Thêm display:inline-block vào div của bạn và điều đó sẽ giải quyết được vấn đề.

Xem các cập nhật fiddle- DEMO