فهم شامل لارتفاع الخط والرأسية

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

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

القيمة: <Mense> | <Sepnal> | <bumber> | عادي | ورث

القيمة الأولية: عادي

تنطبق على: جميع العناصر

الميراث: نعم

النسبة المئوية: حجم الخط بالنسبة للعنصر

لفهم ارتفاع الخط في العمق ، تحتاج إلى فهم المصطلحات المشتركة حول ارتفاع الخط.

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

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

عندما تكون ارتفاع الخط أقل من حجم الخط ، يكون المربع في الخط أقل من منطقة المحتوى في الواقع

يتم تعريف مربع الصف على أنه المسافة بين الجزء العلوي من أعلى صف داخلي في الصف في الصف وأسفل مربع داخلي أدنى صف ، ويقع الجزء العلوي من كل مربع صف بجوار مربع الصف السابق.

لا يؤثر الهامش الداخلي والهامش الخارجي والحدود على ارتفاع إطار الخط ، أي أنه لا يؤثر على ارتفاع الخط.

يتم التحكم في الحدود المحددة للعناصر الموجودة في الخط

لن يتم تطبيق الهوامش على أعلى وأسفل العناصر غير البديلة في الصف

يتم تطبيق الهامش اليساري ، الحشو اليسرى ، اليسار الحدودي على بداية العنصر ؛ يتم تطبيق يمين الهامش ، الحشو اليمين ، يمين الحدود على نهاية العنصر

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

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

يتم استخدام المحاذاة الرأسية لضبط المحاذاة الرأسية ، وستؤثر جميع العناصر المحاذاة رأسياً على ارتفاع الصف.

القيمة: خط الأساس | الفرعية | سوبر | أعلى | نص النص | الأوسط | أسفل | نص نص | <mength> | <Sepnal> | ورث

القيمة الأولية: خط الأساس

تم تطبيقه على: العناصر داخل الخط ، وعناصر الاستبدال ، وخلايا الجدول

الميراث: لا شيء

النسبة المئوية: ارتفاع الخط بالنسبة إلى ارتفاع خط العنصر

[ملاحظة] لا تدعم قيمة النسبة المئوية للمحاذاة الرأسية في متصفح IE7 ارتفاع الصف العشري ، وتأثير العرض يختلف عن تلك الموجودة في المتصفحات القياسية عند أخذ خط الأساس ، المتوسط ​​، القاع النص ، وما إلى ذلك. الحل الشائع هو تعيين الشاشة: كتلة مضمنة في العناصر الخطية.