Ký quỹ trên phần tử con di chuyển phần tử cha

Tôi có một div( cha mẹ ) có chứa một div( con ) khác. Parent là thành phần đầu tiên bodykhông có kiểu CSS cụ thể. Khi tôi đặt

.child
{
    margin-top: 10px;
}

Kết quả cuối cùng là đầu của con tôi vẫn được liên kết với cha mẹ. Thay vì con bị dịch chuyển 10px xuống, bố mẹ tôi di chuyển xuống 10px.

Của tôi DOCTYPEđược thiết lập để XHTML Transitional.

Tôi đang thiếu gì ở đây?

chỉnh sửa 1
Cha mẹ tôi cần phải có các kích thước được xác định nghiêm ngặt bởi vì nó có nền phải được hiển thị bên dưới từ trên xuống dưới (pixel perfect). Vì vậy, thiết lập lề dọc trên đó là không nên .

chỉnh sửa 2
Hành vi này giống nhau trên FF, IE cũng như CR.

Tìm thấy một sự thay thế ở các phần tử con có lề trong DIV Bạn cũng có thể thêm:

.parent { overflow: auto; }

hoặc là:

.parent { overflow: hidden; }

Điều này ngăn chặn lợi nhuận sụp đổ . Biên giới và đệm làm tương tự. Do đó, bạn cũng có thể sử dụng các cách sau để ngăn sập lề trên:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Cập nhật theo yêu cầu phổ biến: Toàn bộ điểm thu hẹp lợi nhuận là xử lý nội dung văn bản. Ví dụ:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Vì trình duyệt thu gọn lề, văn bản sẽ xuất hiện như bạn mong đợi và các <div>thẻ trình bao bọc không ảnh hưởng đến lề. Mỗi phần tử đảm bảo nó có khoảng cách xung quanh nó, nhưng khoảng cách sẽ không được nhân đôi. Các lề của <h2>và <p>sẽ không cộng lại, nhưng trượt vào nhau (chúng sụp đổ). Điều tương tự cũng xảy ra đối với phần tử <p>và <ul>.

Đáng buồn thay, với thiết kế hiện đại, ý tưởng này có thể cắn bạn khi bạn rõ ràng muốn có một container. Đây được gọi là bối cảnh định dạng khối mới trong CSS speak. Thủ thuật overflowhoặc lề sẽ cung cấp cho bạn điều đó.

Đây là hành vi bình thường (ít nhất trong số các triển khai trình duyệt). Ký quỹ không ảnh hưởng đến vị trí của trẻ liên quan đến cha mẹ của nó, trừ khi cha mẹ có phần đệm, trong trường hợp đó, hầu hết các trình duyệt sẽ thêm phần lề của con vào phần đệm của cha mẹ.

Để có được hành vi bạn muốn, bạn cần:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Mặc dù tất cả các câu trả lời đều khắc phục được vấn đề nhưng chúng đi kèm với sự đánh đổi / điều chỉnh / thỏa hiệp như

• floats, Bạn phải nổi các yếu tố
• border-top, Điều này sẽ đẩy cha mẹ xuống ít nhất 1px xuống, sau đó sẽ được điều chỉnh bằng cách giới thiệu -1pxlề cho chính phần tử cha. Điều này có thể tạo ra vấn đề khi cha mẹ đã có margin-toptrong các đơn vị tương đối.
• padding-top, tác dụng tương tự như sử dụng border-top
• overflow: hidden, Không thể được sử dụng khi cha mẹ sẽ hiển thị nội dung tràn, như menu thả xuống
• overflow: auto, Giới thiệu thanh cuộn cho phần tử cha có nội dung (cố ý) tràn (như bóng hoặc hình tam giác của đầu công cụ)

Vấn đề có thể được giải quyết bằng cách sử dụng các yếu tố giả CSS3 như sau

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

thêm phong cách display:inline-blockcho yếu tố con

phần tử cha mẹ không được để trống ít nhất là đặt  trước phần tử con.

Đây là những gì làm việc cho tôi

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Tôi phát hiện ra rằng, bên trong .css> nếu bạn đặt thuộc tính hiển thị của phần tử div thành khối nội tuyến thì nó sẽ khắc phục được sự cố. và ký quỹ sẽ hoạt động như mong đợi.

Giải pháp chỉ gọn gàng CSS

Sử dụng mã sau đây để thêm một đứa con đầu tiên không có nội dung vào div di chuyển không chủ ý:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

Ưu điểm của phương pháp này là bạn không cần thay đổi CSS của bất kỳ yếu tố hiện có nào và do đó có tác động tối thiểu đến thiết kế. Bên cạnh đó, phần tử được thêm vào là phần tử giả, không có trong cây DOM.

Hỗ trợ cho các phần tử giả được phổ biến rộng rãi: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ và IE 8+. Điều này sẽ hoạt động trong bất kỳ trình duyệt hiện đại nào (hãy cẩn thận với trình duyệt mới hơn ::before, không được hỗ trợ trong IE8).

Bối cảnh

Nếu con đầu tiên của một phần tử có a margin-top, cha mẹ sẽ điều chỉnh vị trí của nó như một cách thu gọn các lề dư thừa. Tại sao? Chỉ như vậy thôi.

Đưa ra vấn đề sau:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Bạn có thể sửa nó bằng cách thêm một đứa trẻ có nội dung, chẳng hạn như một không gian đơn giản. Nhưng tất cả chúng ta đều ghét thêm không gian cho vấn đề chỉ thiết kế. Do đó, sử dụng white-spacetài sản để nội dung giả mạo.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Trường hợp position: relative;đảm bảo định vị chính xác của sửa chữa. Và white-space: pre;làm cho bạn không phải thêm bất kỳ nội dung nào - như khoảng trắng - vào bản sửa lỗi. Và height: 0px;width: 0px;overflow: hidden;chắc chắn rằng bạn sẽ không bao giờ thấy sửa chữa.

Bạn có thể cần thêm line-height: 0px;hoặc max-height: 0px;để đảm bảo chiều cao thực sự bằng không trong các trình duyệt IE cổ (tôi không chắc chắn). Và tùy chọn bạn có thể thêm <!--dummy-->nó vào các trình duyệt IE cũ, nếu nó không hoạt động.

Nói tóm lại, bạn có thể thực hiện tất cả điều này chỉ với CSS (loại bỏ nhu cầu thêm một đứa trẻ thực sự vào cây DOM DOM):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Để ngăn "Div cha" sử dụng lề của "div con":
Trong cha mẹ sử dụng các css này:

• Phao nổi
• Đệm
• Biên giới
• Tràn ra

Các marginyếu tố chứa trong .childđang sụp đổ.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

Trong ví dụ này, pđang nhận được margintừ các kiểu mặc định của trình duyệt. Trình duyệt mặc định font-sizethường là 16px. Bằng cách có margin-tophơn 16px, #childbạn bắt đầu nhận thấy vị trí của nó di chuyển.

Tôi cũng gặp vấn đề này nhưng thích ngăn chặn các vụ hack lợi nhuận âm, vì vậy tôi đặt một

<div class="supercontainer"></div>

xung quanh nó tất cả có miếng đệm thay vì lề. Tất nhiên điều này có nghĩa là viêm nhiều hơn nhưng có lẽ đó là cách sạch nhất để thực hiện điều này đúng cách.

thú vị là giải pháp yêu thích của tôi cho vấn đề này chưa được đề cập ở đây: sử dụng phao.

html:

<div class="parent">
    <div class="child"></div>
</div>

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

xem nó ở đây: http://codepen.io/anon/pen/Iphol

lưu ý rằng trong trường hợp bạn cần chiều cao động trên cha mẹ, nó cũng phải nổi, vì vậy chỉ cần thay thế height:100px;bằngfloat:left;

Một giải pháp thay thế tôi tìm thấy trước khi tôi biết câu trả lời chính xác là thêm đường viền trong suốt vào phần tử cha.

Hộp của bạn sẽ sử dụng thêm pixel mặc dù ...

.parent {
    border:1px solid transparent;
}

Sử dụng topthay vì margin-toplà một giải pháp có thể, nếu thích hợp.