Warum ist die berechnete Höhe von DIV größer als der Inhalt (wie bei svg), wenn die Höhe als "100%" angegeben wird? [Duplikat

Question

Aug 04, 2016, 10:56 PM

Warum ist die berechnete Höhe von DIV größer als der Inhalt (wie bei svg), wenn die Höhe als "100%" angegeben wird? [Duplikat

Diese Frage hat hier bereits eine Antwort:

Image inside div hat zusätzlichen Platz unter dem Bild 9 answers

Hier ist mein Code:

<!DOCTYPE html>
<html>

<body>
  <div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;">
    <svg height="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);">
      <circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  </div>
</body>

</html>

Ich erhalte die berechnete Dimension von SVG als 1000 x 500, aber die berechnete Dimension von DIV ist 1264 x 504.

Breite von DIV - 1264px ist die Breite der Seite, da sie zu 100% angegeben ist, d. H. Verstanden wird, aber warum beträgt die Höhe 504px, während die SVG-Höhe 500px beträgt?

Danke im Voraus