كيف يمكنني Uncollapse هامش؟ [مكرر

https://stackoverflow.com/questions/1828804

11-09-2019
|

سؤال

هذا السؤال لديه بالفعل إجابة هنا:

كيفية تعطيل الانهيار الهامش؟ 9 إجابات

الهوامش الانهيار في CSS: http://www.w3.org/tr/css21/box.html#collapsing-margins.

انا افهم ال الغرض من الميزة, ، لكنني أحاول القيام بالتخطيط، ولا يمكنني معرفة كيفية إيقاف تشغيله.

الطريقة التي يتم شرحها عادة في دروس CSS هي إما:

إضافة الحدود
إضافة الحشو

كل هذه لها آثار جانبية تصبح واضحة عند التعامل مع تخطيطات مثالية بكسل مع صور خلفية وحصائر ثابتة.

هل هناك أي طريقة لتعطيل الإنهاء ببساطة دون الحاجة إلى دفع لحضور بكسل إضافية في التخطيط؟ لا معنى له أن يؤثر على المستند بصريا لتغيير السلوك مثل هذا.

المحلول

حسنا، تحتاج إلى شيء ما بين "كسر" الانهيار.

كان فكرتي الأولى لاستخدام DIV مع display:none وضع بينهما، ولكن هذا لا يبدو للعمل.

لذلك حاولت:

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

الذي يبدو أنه يقوم بهذه المهمة بشكل جيد (على الأقل في فايرفوكس، لم يكن لديك Internet Explorer مثبت هنا لاختبارها ...)

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

نصائح أخرى

من IE8 يمكنك القيام به:

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

مع CSS:

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

استخدام تخطيط المرن أو الشبكة.

في حاويات فليكس وشبكة، لا يوجد شيء مثل انهيار الهامش.

مزيد من التفاصيل في المواصفات:

3. الحاويات المرن: flex و inline-flex displayالقيم

حاوية Flex تنشئ سياق تنسيق فني جديد لمحتوياته. هذا هو نفسه إنشاء سياق تنسيق كتلة، باستثناء ذلك يتم استخدام تخطيط المرن بدلا من تخطيط الحظر. على سبيل المثال، لا تتطفل العوامات في حاوية Flex، وانهيار هوامش الحاوية المرنة مع هوامش محتوياته.

5.1. إنشاء حاويات الشبكة: grid و inline-gridعرض القيم

تنشئ حاوية الشبكة سياق تنسيق الشبكة الجديد لمحتوياته. هذا هو نفسه إنشاء سياق تنسيق كتلة، باستثناء ذلك يتم استخدام تخطيط الشبكة بدلا من تخطيط الكتلة: لا تتطفل العوامات في حاوية الشبكة، وانهيار هوامش شبكة الشبكة مع هوامش محتوياتها.

يشير إريك ماير إلى وجهة نظرك الدقيقة في مقاله الهوامش غير المنفرة.

انظر نص المقال بعد الشكل 6 لنهجه. يشير إلى أن الحشو / الحدود 1PX عادة ما تكون الطريقة التي يجب أن تذهب، ولكنها تقدم حلا بسيطا جدا للحالات حيث لا توجد مرونة في إضافة تلك البكسل الإضافية.

إنه ينطوي على الهوامش المدهلية يدويا في كل عنصر، لذلك لست متأكدا مما إذا كان سيعمل على حالتك الخاصة.

هناك خدعة أنيقة لتعطيل الانهيار الهامش الذي لا يوجد له تأثير بصري، بقدر ما أعرف، هو وضع حشوة الوالد ل 0.05px:

.parentClass {
    padding: 0.05px;
}

لم تعد الحشو 0 لذلك لن يحدث الانهيار بعد الآن ولكن في الوقت نفسه، فإن الحشو صغير بما فيه الكفاية بصريا سوف يستقر إلى 0.

إذا كانت بعض الحشو الأخرى مطلوبة، فقم بتطبيق الحشو فقط على "الاتجاه" الذي انهار الهامش غير مرغوب فيه، على سبيل المثال padding-top: 0.05px;.

مثال العام:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

يحرر: غيرت القيمة من 0.1 ل 0.05. وبعد من هذا الاختبار الصغير, ، يبدو أن فايرفوكس يأخذ 0.1px الحشو في الاعتبار. على أية حال، 0.05px يبدو أن تفعل الخدعة.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow