Zweifel über Strömungsmodell in Bezug SVG

Ich habe den folgenden Code:Zweifel über Strömungsmodell in Bezug SVG

body {    background-color: black; } 
 
.root {    background-color: aqua; } 
 
.svg-container { background-color: lightgray; } 
 
svg {    background-color: red; } 
 
.btn {    background-color: yellow; } 
 

 
.svg-container, .btn { 
 
    display: inline-block; 
 
} 
 
svg { 
 
    height: 60px; 
 
    width: 60px; 
 
} 
 

 
svg, .svg-container, .btn { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
}

<html> 
 
<head></head> 
 
<body> 
 
    <div class="root"> 
 
     <div class="svg-container"> 
 
      <svg></svg> 
 
     </div> 
 
     <button class="btn">Button</button> 
 
    </div> 
 
</body> 
 

 
</html>

I erwartet, die Höhe der .svg-container zum enthaltenden svg = 60px genau gleich zu sein. Außerdem sollte die .btn auf der Oberseite und nicht unten sein. Eine weitere interessante Sache mit .btn ist, dass es viel Platz darüber hat, aber es gibt eine Lücke zwischen dem .btn und dem .div.

Warum passiert es?

Quelle

2017-04-12 Anurag Kalia

Das ist, weil Sie inline-block für Ihr SVG-Element verwenden. Obwohl einige Gestaltungsmöglichkeiten auf Blockebene beibehalten werden (z. B. die Möglichkeit, vertikale Bemaßungen, Abstände und Ränder explizit zu deklarieren), wird auch das Verhalten von Inline-Elementen wie an der Grundlinie angezeigt.

Wenn Sie sich Ihr Code-Snippet ansehen, ist die Unterseite Ihres Inline-Block-SVG mit der Grundlinie des daneben liegenden Schaltflächentextes bündig. Der zusätzliche Platz unter allen Inline- und Inline-Block-Elementen ist für Unterlängen auf Glyphen reserviert, wie die hängenden Teile von Zeichen wie g, p, q.

Quelle

2017-04-12 09:53:56 Terry

Zweifel über Strömungsmodell in Bezug SVG

Antwort

Verwandte Themen