انضمام الهوامش في CSS

يُشار إلى اندماج الهوامش عند مواجهة الهوامس العمودية بعضها البعض، فإنها تشكل هوامش واحدة.

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

اندماج الهوامش

اندماج الهوامش (الجمع) هو مفهوم بسيط نسبيًا. ولكن، في ممارسة ترتيب صفحات الويب، يمكن أن يسبب الكثير من الارتباك.

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

عندما يظهر عنصر على عنصر آخر، تنضم الهوامس السفلية للعنصر الأول إلى الهوامس العلوية للعنصر الثاني. انظر إلى الشكل التالي:

مثال للانضمام بين الهوامش في CSS 1

جرب بنفسك

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

مثال للانضمام بين الهوامش في CSS 2

جرب بنفسك

على الرغم من أن ذلك يبدو غريبًا، ولكن الهوامش يمكن أن تندمج حتى مع نفسها.

افترض أن يكون لديك عنصر فارغ، له هوامش ولكن ليس له حواف أو إملاء. في هذه الحالة، تلتقي الهوامش العلوية والسفلية معًا، وتندمج:

مثال للانضمام بين الهوامش في CSS 3

إذا كانت هذه الهوامش تواجه هوامش عنصر آخر، فإنها ستندمج أيضًا:

مثال للانضمام بين الهوامش في CSS 4

هذا هو السبب في أن مساحة الأقسام العناصر الصغيرة جدًا، لأن جميع الهوامش تندمج معًا لتشكيل هوامش صغيرة.

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

المعنى الفعلي للانضمام بين الهوامش في CSS

ملاحظة:فقط الهوامش الافقية للصناديق المضمنة في تدفق الوثيقة العادي تتحقق من اندماج الهوامش. الهوامش بين الصناديق المضمنة، المضمنة في السقوط أو الموضعية لا تندمج.

جميع خصائص الهوامش الخارجية لـ CSS

خصائص وصف
margin خصائص مختصرة لضبط خصائص الهوامش الخارجية في بيانة واحدة.
margin-bottom ضبط الهوامش الخارجية السفلية للعنصر.
margin-left ضبط الهوامش الخارجية اليسرى للعنصر.
margin-right ضبط الهوامش الخارجية اليمنى للعنصر.
margin-top ضبط الهوامش الخارجية العلوية للعنصر.