html - w3school - تحتوي الصورة الموجودة داخل div على مساحة إضافية أسفل الصورة




img html (6)

إصلاح سريع:

لإزالة الفجوة أسفل الصورة ، يمكنك:

  • قم بتعيين الخاصية vertical-align للصورة إلى vertical-align: bottom; vertical-align: top; أو vertical-align: middle;
  • قم بتعيين خاصية العرض الخاصة بالصورة المراد display:block;

اطلع على الشفرة التالية لعرض ترويجي مباشر:

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

شرح: لماذا توجد فجوة تحت الصورة؟

لا تعد الفجوة أو المساحة الإضافية الموجودة أسفل الصورة خطأ أو مشكلة ، بل هي السلوك الافتراضي. السبب الرئيسي هو أن يتم استبدال العناصر ( انظر vertical-align و W3C ). هذا يسمح لهم "التصرف مثل الصورة" ويكون لها أبعاد جوهرية خاصة بها ، ونسبة العرض إلى الارتفاع ....
تقوم المتصفحات بحساب خاصية العرض الخاصة بها إلى inline ولكنها تعطيها سلوكًا خاصًا مما يجعلها أقرب إلى عناصر inline-block (حيث يمكنك محاذاة رأسية ، وإعطائها ارتفاع ، وهامش أعلى / أسفل ، وحشو ، وتحويل ...).

هذا يعني أيضا أن:

[...] عندما يتم استخدام الصور في سياق تنسيق مضمّن مع محاذاة عمودية: خط الأساس ، سيتم طرح الجزء السفلي من الصورة على خط الأساس للحاوية . ( المصدر: W3C ، التأكيد على المنجم )

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

تحتاج عناصر المحاذاة الأساسية إلى الاحتفاظ بمساحة descenders التي تمتد أسفل خط الأساس (مثل j, p, g ... ) كما يمكنك رؤيتها في الصورة أعلاه. في هذا التكوين ، تتم محاذاة الجزء السفلي من الصورة على الخط الأساسي كما ترى في هذا المثال:

div{border:1px solid red;}
img{width:100px;height:auto;}
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

هذا هو السبب في أن السلوك الافتراضي للعلامة <img> يُنشئ فجوة في أسفل الحاوية الخاصة بها ولماذا يقوم بتغيير خاصية المحاذاة العمودية أو خاصية العرض بإزالتها كما هو الحال في العرض التوضيحي التالي:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}
<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

لماذا في التعليمة البرمجية التالية يكون ارتفاع div أكبر من ارتفاع img ؟ هناك فجوة تحت الصورة ، ولكن لا يبدو أن الحشو / الهامش.

ما هي الفجوة أو المساحة الإضافية أسفل الصورة؟

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>


استخدمت line-height:0 وهو يعمل بشكل جيد بالنسبة لي.


كل ما عليك القيام به هو تعيين هذه الخاصية:

img {
    display: block;
}

الصور افتراضيا لديها هذه الخاصية:

img {
    display: inline;
}

لقد أضفت float:left إلى div ونجحت


هناك خيار آخر مقترح here هو تعيين نمط الصورة على أنه style="display: block;"


يمكن للمرء أيضًا إبطال ارتفاع خط الوالدين:

#wrapper {
  line-height: 0;
}

كل الإصلاحات: http://jsfiddle.net/FaPFv/





image