لماذا ، عندما أركز صورة في Div مع ارتفاع خط ، هل تظهر فجوة 3 بكسل في الأعلى؟

Question

القي نظرة على هذه الصفحة. يجب أن تتمحور الصور على اليمين داخل divs. ولكن إذا نظرت عن كثب ، فهناك حدود صغيرة تبلغ حوالي 3 بكسل في الأعلى. وإذا قمت بتعطيل overflow: hidden (من خلال Firebug أو IE8 ما يعادلها) ، فإنه يخرج من القاع.

HTML هو هذا:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

و CSS ، هذا:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

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

Answer 1

NB: لست متأكدًا تمامًا من أن هذا التفسير صحيح ، لكن يبدو لي معقولًا.

أولاً ، دعونا نرى ما تقوله المواصفات رائدة ونصف:

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

يقوم مركز وكلاء المستخدمين برمجيات رأسيًا في مربع مضمّن ، مضيفًا نصف الرائد في الأعلى والسفلي. على سبيل المثال ، إذا كان هناك جزء من النص "12 بكسل" و "قيمة" الخط "هي" 14px "، فيجب إضافة 2 بكسل من المساحة الإضافية: 1 بكسل أعلاه و 1 بكسل تحت الحروف. (هذا ينطبق على الصناديق الفارغة أيضًا ، كما لو أن المربع الفارغ يحتوي على حرف ضيق بلا حدود.)

حتى الان جيدة جدا. لذلك أي صناديق خط داخل أ div.small التي لديها ارتفاع أقل من div.small'س line-height سوف تتمحور عموديا مع div.small. الآن دعونا ننظر إلى ال vertical-align منشأه, ، على وجه التحديد middle القيمة:

قم بمحاذاة نقطة الوسط العمودي للمربع مع خط الأساس من المربع الأصل بالإضافة إلى نصف الذروة X للوالد.

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

كما وجدت ، الإعداد font-size: 0 يزيل الفجوة تماما. نظرًا لأن الخط الآن ليس له ارتفاع ، فإن صندوق الخط يحصل على رائدة وقيادة من 50 بكسل ، مع تركز خط الأساس رأسياً. لتقديم vertical-align: middle Image ، يضع المتصفح نقطة الوسط في هذا الأساس ، بالإضافة إلى x-theight of the Font ، الذي أصبح الآن صفر. وهذا يعطي صورة مركزية رأسيا.

Answer 2

تبين ، الإعداد font-size:0; على DIV يحدد المشكلة. ومع ذلك ، لا يزال لا يفسر الفجوة. أي شخص يعرف ماذا أسباب الفجوة؟

Answer 3

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

الخط: 11px/1.35em verdana ، arial ، helvetica ، sans-serif ؛

= سيء للجداول على ما يبدو. -لقد أزلت هذا الإعلان واستخدمت بدلاً من ذلك حجم الخط: 11px ، ارتفاع الخط: PX ، عائلة الخط ، وما إلى ذلك ، وقد أصلحت الفجوة!