Дополнительное вертикальное пространство на SVG

Question

У меня есть SVX 16x16px с 10px отступов и границей 1px, и по какой-то причине высота составляет 40 пикселей вместо 38 пикселей, как и ширина (на моем локальном сайте, на самом деле это 36.95x44px). Что я могу сделать, чтобы устранить это дополнительное пространство и достичь идеальной площади?

.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

Это потому, что ваш <svg> элемент отображается встроенный по умолчанию. Если вы явно объявите display: block на элементе, высота будет правильно вычисляться.

Когда встроенный дисплей активен, то элемент будет часто «неуправляемой» высота из-за того, что:

• вы cannot explicitly dictate vertical dimensions -be это край, отступов по высоте на встроенных элементах, что приводит к непредсказуемым размерам и
• Вертикальная высота элемента равна 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>