CSS: الهامش عندما لا يكون لدى الوالدين حدود

Question

كما ترون في هذه الصورة, ، لدي برتقالي div داخل الأخضر div مع عدم وجود حدود أعلى. البرتقالة div لديه 30px الهامش العلوي ، لكنه يدفع أيضًا اللون الأخضر div تحت. بالطبع ، فإن إضافة الحدود العليا سيصلح المشكلة ، لكنني بحاجة إلى اللون الأخضر div أن تكون من أعلى الحدود. ماذا يمكنني أن أفعل؟

.body {
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	width: 120px;
	height: 112px;
	background-color: lightgreen;
}

.body .container {
	background-color: orange;
	height: 50px;
	width: 50%;
	margin-top: 30px;
}

<div class="header">Top</div>
<div class="body">
	<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

شكرًا

Answer 1

يمكنك إضافة overflow:auto ل .body لمنع الهامش. يرى http://www.w3.org/tr/css2/box.html#collapsing-margins

Answer 2

ما تواجهه هو الانهيار الهامش. لا يحدد الهامش مساحة حول عنصر ما ، بل هو الحد الأدنى للمسافة بين العناصر.

نظرًا لأن الحاوية الخضراء لا تحتوي على أي حدود أو حشوة ، فلا يوجد شيء يحتوي على هامش العنصر البرتقالي. يتم استخدام الهامش بين العنصر العلوي والعنصر البرتقالي تمامًا كما لو أن الحاوية الخضراء ستحتوي على الهامش.

استخدم حشوة في الحاوية الخضراء بدلاً من الهامش على العنصر البرتقالي.

Answer 3

يستخدم padding بدلاً من margin:

.body .container {
    ...
    padding-top: 30px;
}

Answer 4

لست متأكدًا مما إذا كان هذا سيعمل في حالتك ، لكنني فقط حللت ذلك باستخدام خصائص CSS التالية

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element كان يتم دفعه لأسفل لأنه أول عنصر طفل كان لديه ملف margin-top: 30px. مع هذه CSS ، يعمل الآن كما هو متوقع :) لست متأكدًا مما إذا كان سيعمل في كل حالة ، YMMV.

Answer 5

يمكنك إما إضافة padding-top: 30 على المربع الأخضر ، استخدم المواقع النسبية على الصندوق البرتقالي مع top: 30px, أو تطفو الصندوق البرتقالي واستخدم نفس الشيء margin-top: 30px.

Answer 6

قرأت هذا المستند:نموذج مربع - الهامش ينهار

CSS

.body {
    border: 1px solid black;
    border-bottom: none;
    border-top: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    padding-top: 30px;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}

Answer 7

لست متأكدًا من كيفية اختراق هذا ، ولكن ماذا عن إضافة حدود شفافة؟