นี่คือภาพประกอบของปัญหา (ทดสอบใน Firefox และ Chrome):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>ขอให้สังเกตเพิ่มredพื้นที่ภายในด้านล่างสีฟ้าdivsvg
ลองตั้งค่าpaddingและmarginองค์ประกอบทั้งสองเป็น0แล้ว แต่ไม่มีโชค
คำตอบ:
คุณต้องบน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บน svg และ / หรือคอนเทนเนอร์นั้นไม่แตกต่างกัน display: blockแก้ไขได้เท่านั้น นี่เป็น gotcha ถ้าคุณใช้ SVG ขนาดใหญ่เพราะคุณจะไม่คิดว่ามันเป็นแบบอินไลน์ หากคุณมีไอคอนเล็ก ๆ น้อย ๆ มันก็สมเหตุสมผลดี
display: blockไม่ได้ผลสำหรับฉัน แต่vertical-alignทำ
svgเป็นinlineองค์ประกอบ inlineองค์ประกอบออกจากพื้นที่สีขาว
วิธีการแก้:
เพิ่มdisplay:blockไปsvgหรือทำให้ความสูงของผู้ปกครอง div svgเดียวกับ
อีกทางเลือกหนึ่งคือเพิ่มfont-size: 0ใน svg parent
เปลี่ยนdisplayทรัพย์สินของ SVG blockที่จะ
ลองเพิ่มheight:100pxการdivและการใช้height="100%"บนsvg:
<div style="background-color:red;height:100px">
<svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
svgล่วงหน้า
เพียงแค่เพิ่มความสูงให้กับองค์ประกอบ div หลัก
<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
เปลี่ยนสไตล์ของคุณเป็น
style = "background-color: red; line-height: 0;"