Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Svg

Why Computed Height Of Div Is Larger Than It's Content (like Svg) When It's Height Is Provided As "100%"?

Post a Comment
Here is my code: I get the computed dimension of SVG as 1000 X 500 but the computed dimension of DIV is 1264 X 504. Width of DIV - 1264px is the width of page as it is provided as

Solution 1:

It's because <svg> is an inline element - setting it to display: block; will remove those effects e.g. caused from a line-height.

svg {
  display: block;
}
<!DOCTYPE html><html><body><divalign="center"style="width:100%; height:100%; padding: 0px; margin: 0px;"><svgheight="500"version="1.1"width="1000"xmlns="http://www.w3.org/2000/svg"id="raphael-paper-0"style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><circlecx="500"cy="250"r="100"stroke="green"stroke-width="4"fill="yellow" /></svg></div></body></html>

Post a Comment for "Why Computed Height Of Div Is Larger Than It's Content (like Svg) When It's Height Is Provided As "100%"?"