html w3schools لماذا لا يتم احتواء الهامش بواسطة العنصر الرئيسي؟



w3schools html reference pdf (1)

عندما يتم تضمين عنصر بهامش ضمن عنصر آخر ، لا يقوم الوالد بإلغاء هذا الهامش باستمرار.

ستؤدي أشياء كثيرة إلى قيام الوالد بلف الهامش الخاص بالطفل:

  • الحدود: الصلبة.
  • الموقف: مطلقة؛
  • عرض: مضمنة كتلة.
  • تجاوز: السيارات

(وهذا فقط من التجارب الصغيرة ، ولا شك أن هناك المزيد.)

أفترض أن هذا له علاقة بهوامش الانهيار ، لكن:

  1. لا تحتوي صفحة مواصفات W3C على وصف لمثل هذا السلوك.
  2. لا توجد هوامش متداخلة هنا.
  3. يبدو سلوك جميع المتصفحات متسقًا مع هذه المشكلة.
  4. يتأثر السلوك بواسطة المشغلات التي لا ترتبط الهوامش

ما هو المنطق الذي يجب أن يحتوي فيه العنصر الافتراضي على عنصر تجاوز: يجب أن يحتوي تلقائي على مادة مختلفة عن تلك التي تم تعيين تجاوز السعة عليها تلقائيًا.

لماذا يجب أن يفترض كل شيء عدا السلوك الافتراضي للقسمة العادية أن الهامش متضمن في الأصل - ولماذا يجب ألا يشتمل التخفيض العادي على الهامش؟

تحرير: الجواب النهائي هو أن W3C حقا يحدد هذا السلوك ، ولكن هذا

  • المواصفات لا حقا أي معنى.
  • خلط المواصفات ، دون أي كلمة من التفسير :
    • "الهوامش المجانية" (لا يتم احتواء الهامش الذي يلمس الجزء العلوي أو السفلي من الشركة الأم على الأصل)
    • "الهوامش المنهارة" (يسمح للهوامش المجاورة بالتداخل).

عرض:

<!doctype html>
<html>
<head>
<title>Margins overextending themselves</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
    body{
        margin:0;
    }
    div.b{
        background-color:green;
    }
    div.ib{
        display:inline-block;
        background-color:red;
    }
    div.pa{
        background-color:yellow;
        position:absolute;
        bottom:0; right:0;
    }
    div.oa{
        background-color:magenta;
        overflow:auto;
    }
    div.brdr{
        background-color:pink;
        border:solid;
    }

    h1{margin:100px; width:250px; border:solid;}
</style>
</head>
<body>
<div class="b">
    <h1>Is the margin contained?</h1>
</div>
<div class="ib">
    <h1>Is the margin contained?</h1>
</div>
<div class="pa">
    <h1>Is the margin contained?</h1>
</div>
<div class="oa">
    <h1>Is the margin contained?</h1>
</div>
<div class="brdr">
    <h1>Is the margin contained?</h1>
</div>
</body>
</html>`

هكذا تعمل CSS وفقًا لـ W3C :

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

أكثر تحديدًا لحالتك من div الأعلى:

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

  • إذا كانت الهوامش الخاصة بالعنصر مطوية مع الهامش العلوي للجهة الأم ، يتم تعريف حافة الحدود العلوية للمربع لتكون هي نفسها كالآخر.
  • خلاف ذلك ، إما أن عنصر الأصل لا يشارك في انهيار الهامش ، أو يتم تضمين الهامش السفلي الرئيسي فقط. موضع حافة الحدود العليا للعنصر هو نفسه كما لو كان العنصر يحتوي على حد سفلي غير صفري.

أفضل شيء يمكنني القيام به هو توجيهك إلى "Collapsing Margins" على sitepoint (بواسطة Tommy Olsson و Paul O'Brien) . إنهم يقدمون شرحًا مفصلاً للغاية مع أمثلة توضح لك السلوكيات التي قمت بتجسيدها في كود مثال السؤال.





margin