1

Hi I have svg rectangle within the div element. I have set the rect element height as 300. while checking the parent element (div) height has been shown as 304 why?

<div>
<svg width="300" height="300">
  <rect width="300" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

 </div>

Sample Link: http://jsfiddle.net/mkn9t627/7/

enter image description here

Akbar Basha
  • 1,168
  • 1
  • 16
  • 38

2 Answers2

2

There are spaces between your opening and closing tags. Set the font-size of the parent to 0 and it will show 300px in the inspector.

div {
  font-size: 0;
}
<div>
  <svg width="300" height="300">
  <rect width="300" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</div>
JasonB
  • 6,243
  • 2
  • 17
  • 27
  • ok but if i have a text inside the div mean in your scenario the text wont display. – Akbar Basha Dec 22 '17 at 06:36
  • If you define 300px on the div it will listen to it. I understand maybe there's a more general question, but that at least seems to fix the standing issue – Jens Dec 22 '17 at 06:37
  • That's true Akbar, unless you put that text in an element and set the font-size on it. – JasonB Dec 22 '17 at 06:41
1

You need to set display: block for svg element because by default it's inline. Here is a good answer for your question: Look here

yrv16
  • 2,205
  • 1
  • 12
  • 22