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

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

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

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

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

ملاحظة:فقط الهوامش الافقية للصناديق المضمنة في تدفق الوثيقة العادي تتحقق من اندماج الهوامش. الهوامش بين الصناديق المضمنة، المضمنة في السقوط أو الموضعية لا تندمج.
جميع خصائص الهوامش الخارجية لـ CSS
خصائص | وصف |
---|---|
margin | خصائص مختصرة لضبط خصائص الهوامش الخارجية في بيانة واحدة. |
margin-bottom | ضبط الهوامش الخارجية السفلية للعنصر. |
margin-left | ضبط الهوامش الخارجية اليسرى للعنصر. |
margin-right | ضبط الهوامش الخارجية اليمنى للعنصر. |
margin-top | ضبط الهوامش الخارجية العلوية للعنصر. |
- الصفحة السابقة الهوامش في CSS
- الصفحة التالية الإحاطة الداخلية في CSS