في عملية التطوير المعتادة ، غالبًا ما نحتاج إلى استخدام صور متعددة.
<! Border-Bottom: 1PX Red ؛} {الحدود: img src = lipeng.png> </li></ul> </body> </html>ولكن في هذا الوقت وجدنا مشكلة ، لماذا يوجد خط إضافي تحت صورتي؟
ما الذي يجري؟
ألم يكن لدي الحدود الخارجية والداخلية بين IMG؟
في الواقع ، هذا هو في الواقع شبح العناصر المضمنة.
أي عنصر مرئي ليس عنصرًا على مستوى الكتلة هو عنصر مرتبط داخليًا ، وخاصة أدائه هي شكل تخطيط الخط. ---- "دليل موثوق CSS"ما هو المعنى؟
هذا يعني أنه في الواقع ، مثل نص الصورة وعناصر الارتباط الداخلي الأخرى ، فإنه يتماشى مع خط الأساس الأم ، لكنك تتماشى مع خط الأساس.
نظرًا لأننا نعرف سبب هذه المشكلة ، فمن السهل حلها.
1. الحل الأولنظرًا لأنه العنصر المضمون ، يمكن أن تحل هذه المشكلة هذه المشكلة بشكل طبيعي ببساطة ووقاحة ، أي تغيير عنصرنا إلى شخصية مخصصة ، هل يمكن تغييرها من حظرها؟
<text type = text/css> {height: : 0 ؛ 2. الحل الثانيهذا صعب للغاية ، يتم تغيير الجنس ، كيف يمكننا اللعب بسعادة ، لذلك يتعين علينا تجربة المنحنى لإنقاذه.
<text type = text/css> img {height: 200px ؛ ؛يمكن أن نرى أن هذا يمكن أن يحقق أيضا النتائج المطلوبة.
والسبب هو أن السمة الافتراضية للمحاذاة العمودية هي خط الأساس.
3. الحل الثالثولكن تم تعديل طريقة المحاذاة ، لذلك قد تسبب أيضًا مشاكل. الآن بعد أن لم تعد في الوثائق الحالية ، لن تكون محاذاة بشكل طبيعي مع الإشارة إلى هذا النص عند وضعك.
يمكننا استخدام العائمة.
<نوع النمط = Text/CSS الأزرق ؛
يمكن أن يحل هذا أيضًا هذه المشكلة ، ولكن يرجى ملاحظة أنه على الرغم من أن العائمة جيدة ، لا تكون جشعًا.
يجب أن تكون قادرًا على حل تأثير العائمة بشكل صحيح ، وإذا كنت قد خططت أصلاً للقيام بتأثير محيط النص ، فيجب أن يكون استخدام العائمة هو الخيار الأفضل لك.
4. الحل الرابعإذا لم تتمكن جميع المخططات المذكورة أعلاه من حل مشاكلك ، فسيتم التضحية فقط بقتلي الكبير.
يمكنك إعطاء عنصر الوالدين لتعيين حجم النص على 0.
<نوع النمط = Text/CSS> IMG {ارتفاع: قائمة -لا شيء ؛نظرًا لأنك تتوافق وفقًا لخط الأساس للنص ، فسوف أقوم بتعيين النص مباشرة ، بحيث لا يمكنك وضعه ، ولكن يُنصح بهذا النهج فقط عندما تكون في عجلة من أمرك.
لخصحسنًا ، ما سبق هو الحلول الأربعة لهذه المشكلة. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.