lề nội dung div đẩy vùng chứa

Question

Tôi đang gặp sự cố thực sự khiến tôi khó hiểu.

Tôi có vùng chứa mà tôi muốn áp dụng nền cho vị trí ở trên cùng bên phải của màn hình trình duyệt. Các div bên trong có một lề trên của 4em và điều này đang đẩy div container.

CSS:

#container { 
background: transparent url("../images/house-bg.png") top right no-repeat scroll; 
} 

#wrapper { 
    background: #FFF; 
    width: 960px; 
    height: 600px; 
    margin: 4em auto 0; 
    border: 10px solid #C3CF21; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    border-radius: 20px; 
    -moz-box-shadow: 0 0 25px #444; 
    -webkit-box-shadow: 0 0 25px #444; 
    box-shadow: 0 0 25px #444; 
} 

HTML:

<div id="container"> 
     <div id="wrapper"> 
      <div id="header"> 

      </div> 
      <div id="main"> 

      </div> 
     </div> 
     <div id="footer"> 
      &copy; Copyright <?php echo date("Y");?> Company, Inc. 
     </div> 
    </div> 

Tôi muốn bên lề wrapper để được bên trong div container thay vì bên ngoài.

Tôi đã thử nhiều thuộc tính hiển thị và thuộc tính vị trí không có kết quả. Điều duy nhất mà sửa chữa nó là chèn một " " trước khi bắt đầu #wrapper nhưng có phải là một CSS sửa chữa này.

Answer 1

Bạn có thể thêm overflow:hidden để "đóng" ngữ cảnh trong phạm vi số #container div.

Ở đây, http://jsfiddle.net/kQsPR/ cố gắng xóa overflow:hidden và nó sẽ hoạt động như bạn mô tả.

Hành vi này được quy định ở đây: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Trong một bối cảnh khối định dạng, mép ngoài trái mỗi hộp của chạm vào trái cạnh của khối chứa (ví từ phải sang trái định dạng, phải cạnh chạm). Điều này đúng ngay cả trong sự hiện diện của của các phao (mặc dù hộp có kích thước của hộp có thể co lại do nổi), trừ khi hộp thiết lập một ngữ cảnh định dạng khối mới (trong đó trường hợp hộp có thể trở thành hẹp hơn do các phao).

Và đây chính xác là "tràn" khác với "ẩn" có khả năng (thiết lập ngữ cảnh định dạng mới), bạn cũng có thể làm điều đó bằng cách thêm đường viền vào phần tử #container của bạn.