দ্রুত ঠিক করা:
করার ইমেজ অধীনে ফাঁক অপসারণ , আপনি পারবেন:
- চিত্রটির উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্যটি সেট করুন
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>
ব্যাখ্যা: চিত্রের নীচে কেন একটি ফাঁক রয়েছে?
চিত্রের নীচে ফাঁক বা অতিরিক্ত স্থান কোনও বাগ বা সমস্যা নয়, এটি ডিফল্ট আচরণ। মূল কারণ (যে চিত্র উপাদান প্রতিস্থাপিত হয় দেখতে MDN প্রতিস্থাপিত উপাদান )। এটি তাদের "চিত্রের মতো কাজ করতে" এবং তাদের নিজস্ব অভ্যন্তরীণ মাত্রা, দিক অনুপাত থাকতে দেয় ....
ব্রাউজারগুলি তাদের প্রদর্শন বৈশিষ্ট্যগুলি তুলনা করে inlineতবে তারা তাদের একটি বিশেষ আচরণ দেয় যা তাদের inline-blockউপাদানগুলির আরও কাছাকাছি করে তোলে (যেমন আপনি তাদের উল্লম্ব সারিবদ্ধ করতে পারেন, দিতে পারেন) এগুলি একটি উচ্চতা, শীর্ষ / নীচের মার্জিন এবং প্যাডিং, রূপান্তর ...)।
এর অর্থ এটিও:
<img>কোনও বেসলাইন নেই, সুতরাং যখন চিত্রগুলি উল্লম্ব-সারিবদ্ধ: বেসলাইন সহ একটি ইনলাইন বিন্যাস প্রসঙ্গে ব্যবহৃত হবে, তখন চিত্রটির নীচের অংশটি পাঠ্য বেসলাইনে স্থাপন করা হবে।
( উত্স: MDN , জোর খনি )
ডিফল্টরূপে ব্রাউজারগুলি উল্লম্ব-প্রান্তিক বৈশিষ্ট্যটিকে বেসলাইনে গণনা করে, এটি ডিফল্ট আচরণ। নীচের চিত্রটি যেখানে পাঠ্যের উপরে বেসলাইনটি রয়েছে তা দেখায়:
( চিত্র উত্স )
বেসলাইন প্রান্তিককৃত উপাদানের জন্য স্থান রাখা প্রয়োজন descenders যে বেসলাইন (যেমন নিচের প্রসারিত j, p, g ...) হিসাবে আপনি উপরের ছবিতে দেখতে পারেন। এই কনফিগারেশনে, চিত্রটির নীচের অংশটি বেসলাইনটিতে প্রান্তিক করা হয়েছে যেমন আপনি এই উদাহরণে দেখতে পাচ্ছেন:
div{border:1px solid red;font-size:30px;}
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>
