সমস্যার একটি চিত্রণ এখানে দেওয়া হয়েছে (ফায়ারফক্স এবং ক্রোমে পরীক্ষিত):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>নীলের নীচের redভিতরে অতিরিক্ত জায়গা লক্ষ্য করুন ।divsvg
ইতিমধ্যে উভয় উপাদানকে সেটিং করার চেষ্টা করেছে paddingএবং কোনও ভাগ্য নেই withmargin0
উত্তর:
আপনার যা দরকার তা display: block;আপনার উপর svg।
<svg style="display: block;"></svg>
এটি কারণ ইনলাইন-ব্লক উপাদানগুলি (যেমন <svg>এবং <img>) পাঠ্য বেসলাইনে বসে। আপনি যে অতিরিক্ত স্থানটি দেখছেন তা হ'ল অক্ষর অবতরণকারীদের ('y', 'g' ইত্যাদির উপরের লেজ) মিলে রাখার জায়গাটি।
আপনার vertical-align:topএটি রাখার প্রয়োজন হলে inlineবা ব্যবহার করতে পারেনinline-block
inline-blockউপাদানগুলি (যেমন <svg>এবং <img>) পাঠ্য বেসলাইনে বসে। আপনি যে অতিরিক্ত স্থানটি দেখছেন তা হ'ল অক্ষর অবতরণকারীদের ('y', 'g' ইত্যাদির উপরের লেজ) মিলে রাখার জায়গাটি।
vertical-align:top
line-heightতবে line-height: 0এসভিজি এবং / অথবা এর ধারকটিতে সেট করা কোনও তাত্পর্যপূর্ণ হয়নি। শুধুমাত্র display: blockএটি সমাধান। আপনি যদি কোনও বৃহত এসভিজিতে কাজ করে যাচ্ছেন তবে এটি এমন একটি গ্যাচা কারণ আপনি কখনই এটি ইনলাইন হিসাবে ভাবেন না। আপনার যদি সামান্য আইকন থাকে তবে তা বোধগম্য হয়।
display: blockআমার পক্ষে কাজ করেনি, তবে vertical-alignকরেছিলেন
svgএকটি inlineউপাদান। inlineউপাদান সাদা স্থান ছেড়ে।
সমাধান:
যোগ display:blockকরার জন্য svg, বা অভিভাবক বানানো উচ্চতা হিসাবে একই div svg।
আরেকটি বিকল্প হ'ল font-size: 0এসভিজি প্যারেন্টে যুক্ত।
একটি যুক্ত এবং ব্যবহার height:100pxকরার চেষ্টা করুন :divheight="100%"svg
<div style="background-color:red;height:100px">
<svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
svgঅগ্রিমের উচ্চতাটি জানে না ।