Làm thế nào để thoát khỏi không gian thêm dưới đây svg trong div yếu tố

Question

Dưới đây là một minh chứng của vấn đề (thử nghiệm trong Firefox và Chrome):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> 

http://jsfiddle.net/EXLSF/

Thông báo các phụ red không gian bên trong div bên dưới màu xanh svg.

Đã cố gắng thiết lập padding và margin cả hai phần tử thành 0, nhưng không có may mắn.

Answer 1

Bạn cần display: block; trên svg của bạn.

<svg style="display: block;"></svg> 

Điều này là do các yếu tố inline-block (như <svg> và <img>) ngồi trên cơ sở văn bản. Các không gian thêm bạn đang thấy là không gian còn lại để chứa con cháu nhân vật (đuôi trên 'y', 'g' vv).

Bạn cũng có thể sử dụng vertical-align:top nếu bạn cần để giữ cho nó inline hoặc inline-block

Answer 2

Hãy thử thêm height:100px để div và sử dụng một height="100%" trên svg:

<div style="background-color:red;height:100px"> 
    <svg height="100%" width="100" style="background-color:blue;"></svg> 
</div> 

Answer 3

chỉ cần thêm chiều cao cho chính phần tử div

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div> 

Answer 4

Thay đổi display tài sản của svg là block.

Answer 5

svg là một yếu tố inline. inline yếu tố rời khỏi không gian trắng.

Giải pháp:

Thêm display:block-svg, hoặc làm cho chiều cao của div cha mẹ giống như svg.

DEMO here.