How to get rid of extra space below svg in div element

How to get rid of extra space below svg in div element

Here is an illustration of the problem (tested in Firefox and Chrome):

http://jsfiddle.net/EXLSF/

Notice the extra red space inside the div below the blue svg.

Already tried setting padding and margin of both elements to 0, but with no luck.

Answer by danrodi for How to get rid of extra space below svg in div element

Try adding height:100px to div and using a height="100%" on svg:

Answer by Farshad for How to get rid of extra space below svg in div element

simply add height to main div element

Answer by Andy for How to get rid of extra space below svg in div element

You need display: block; on your svg.

By default svg is an inline element and will leave white space.

Answer by Malachi for How to get rid of extra space below svg in div element

Change the display property of the svg to be block.

Answer by Hiral for How to get rid of extra space below svg in div element

svg is an inline element. inline elements leave white-space.

Solution:

Add display:block to svg, or make height of parent div same as svg.

DEMO here.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72