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