SVGの余分な垂直スペース

Question

私は10pxのパディングと1pxのボーダーを持つ16x16px SVGを持っています。何らかの理由で、高さは38pxではなく40pxです（ローカルサイトでは36.95x44pxです）。この余分なスペースをなくし、完璧な広場を実現するために私は何ができますか？あなたの<svg>要素がデフォルトでインラインで表示されているためである

.layout-toggle { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border: 1px solid grey; 
 
} 
 
.layout-toggle.layout-active { 
 
    background-color: black; 
 
} 
 
.layout-toggle.layout-active svg { 
 
    fill: white; 
 
    width: 1em; 
 
    height: 1em; 
 
} 
 
.layout-toggle .layout-icon { 
 
    width: 1em; 
 
    height: 1em; 
 
    vertical-align: middle; 
 
}

<a href="#"> 
 
    <div class="layout-toggle"> 
 
    <svg class="layout-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" viewbox="0 0 17 16" style="enable-background:new 0 0 17 16;" xml:space="preserve"> 
 
     <g> 
 
     <g> 
 
      <g id="calendar-view-01"> 
 
      <g> 
 
       <g id="Calender-Layout-Icon_no-border-1"> 
 
       <path d="M0.3,0h4v4h-4V0z M0.3,6h4v4h-4V6z M0.3,12h4v4h-4V12z M6.3,0h4v4h-4V0z M6.3,6h4v4h-4V6z M6.3,12h4v4h-4 
 
        \t \t \t \t \t \t V12z M12.3,0h4v4h-4V0L12.3,0z M12.3,6h4v4h-4V6L12.3,6z M12.3,12h4v4h-4V12L12.3,12z" /> 
 
       </g> 
 
      </g> 
 
      </g> 
 
     </g> 
 
     </g> 
 
    </svg> 
 
    </div> 
 
</a>

http://codepen.io/ourcore/pen/rjLmRM

Answer 1

。要素上にdisplay: blockを明示的に宣言すると、高さが正しく計算されます。

インライン表示がアクティブな場合、要素がしばしばあるという事実に、「制御不能」の高さを持っています：あなたは予測不可能な寸法が得られ、それにマージン、パディング、高さのインライン要素を-bE cannot explicitly dictate vertical dimensions

• 要素の垂直高さは、テキストノードから継承されたinfluenced by line heightです。当然の

.layout-toggle { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border: 1px solid grey; 
 
} 
 
.layout-toggle.layout-active { 
 
    background-color: black; 
 
} 
 
.layout-toggle.layout-active svg { 
 
    fill: white; 
 
    width: 1em; 
 
    height: 1em; 
 
} 
 
.layout-toggle .layout-icon { 
 
    display: block; /* Use display: block to force proper height */ 
 
    width: 1em; 
 
    height: 1em; 
 
    vertical-align: middle; 
 
}

<a href="#"> 
 
    <div class="layout-toggle"> 
 
    <svg class="layout-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" viewbox="0 0 17 16" style="enable-background:new 0 0 17 16;" xml:space="preserve"> 
 
     <g> 
 
     <g> 
 
      <g id="calendar-view-01"> 
 
      <g> 
 
       <g id="Calender-Layout-Icon_no-border-1"> 
 
       <path d="M0.3,0h4v4h-4V0z M0.3,6h4v4h-4V6z M0.3,12h4v4h-4V12z M6.3,0h4v4h-4V0z M6.3,6h4v4h-4V6z M6.3,12h4v4h-4 
 
        \t \t \t \t \t \t V12z M12.3,0h4v4h-4V0L12.3,0z M12.3,6h4v4h-4V6L12.3,6z M12.3,12h4v4h-4V12L12.3,12z" /> 
 
       </g> 
 
      </g> 
 
      </g> 
 
     </g> 
 
     </g> 
 
    </svg> 
 
    </div> 
 
</a>