Cách loại bỏ khoảng trống thừa bên dưới svg trong phần tử div

88

Dưới đây là hình ảnh minh họa sự cố (được thử nghiệm trong Firefox và Chrome):

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

Mở rộng đoạn mã

Xem trên JSFiddle

Chú ý redkhông gian thừa bên trong bên divdưới màu xanh lam svg.

Đã thử cài đặt paddingvà margincả hai yếu tố 0, nhưng không may mắn.

html css svg

— Daniel
nguồn

Có vẻ như có liên quan đến sự cố tương tự với hình ảnh, ví dụ: stackoverflow.com/questions/7774814/… .

— Daniel

174

Bạn cần display: block;vào của bạn svg.

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

Điều này là do các phần tử khối nội tuyến (như <svg>và <img>) nằm trên đường cơ sở của văn bản. Khoảng trống thừa mà bạn đang thấy là không gian còn lại để chứa các ký tự giảm dần (đuôi trên 'y', 'g', v.v.).

Bạn cũng có thể sử dụng vertical-align:topnếu cần giữ lại inlinehoặcinline-block

— Andy
nguồn

Kinh ngạc. Vì vậy, có phải tất cả các phần tử nội tuyến đều thêm khoảng trắng ở dưới cùng không?

— vỗ tay vào

2

Lời giải thích là inline-blockcác phần tử (như <svg>và <img>) nằm trên đường cơ sở của văn bản. Khoảng trống thừa mà bạn đang thấy là không gian còn lại để chứa các ký tự giảm dần (đuôi trên 'y', 'g', v.v.).

— Paul LeBeau

1

Tôi thích hơnvertical-align:top

— John Xiao

Tôi tin rằng không gian thêm là một cái gì đó để làm với line-height, nhưng thiết lập line-height: 0trên svg và / hoặc vùng chứa của nó không có gì khác biệt. Chỉ display: blockgiải quyết nó. Đây quả là một điều khó hiểu nếu bạn tình cờ làm việc trên một SVG lớn bởi vì bạn sẽ không bao giờ nghĩ nó là nội tuyến. Tuy nhiên, nếu bạn có một biểu tượng nhỏ, nó có ý nghĩa.

— devuxer 23/07/19

display: blockkhông làm việc cho tôi, nhưng vertical-alignđã làm

— Jay

12

svglà một inlinephần tử. inlinecác yếu tố để lại khoảng trắng.

Giải pháp:

Thêm display:blockvào svghoặc làm cho chiều cao của div cha giống như svg.

DEMO ở đây.

— Hiral
nguồn

4

Một thay thế khác là thêm font-size: 0vào svg cha.

— Ângelo Lucas
nguồn

3

Thay đổi thuộc displaytính của svg thành block.

— Malachi
nguồn

1

Hãy thử thêm height:100pxvào divvà 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>

— danrodi
nguồn

4

Cám ơn bạn đã góp ý. Điều này hoạt động tốt, nhưng trở nên phức tạp khi người ta không biết trước chiều cao của chiều cao svg.

— Daniel

1

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

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

— Farshad
nguồn

0

Thay đổi phong cách của bạn thành

style = "background-color: red; line-height: 0;"

— jcdsvg
nguồn