Extra vertical space on SVG

Question

I have a 16x16px SVG with 10px of padding and 1px border and for some reason, the height is 40px instead of 38px, like the width (on my local site, it's actually 36.95x44px). What can I do to eliminate this extra space and achieve a perfect square?

.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
                          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

score 2 · Answer 1 · edited May 23 '17 at 12:33

That is because your <svg> element is displayed inline by default. If you explicitly declare display: block on the element, the height will compute correctly.

When inline display is active, the element will often have "uncontrollable" height due to the fact that:

you cannot explicitly dictate vertical dimensions—be it margin, padding, height—on inline elements, resulting in unpredictable dimensions and
the element's vertical height is influenced by line height inherited from the text node.

.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
                          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>

Ah, of course. I knew this about inline elements and somehow forgot. I had only tried `inline-block`. Thanks! — Mario Parra, Jan 13 '17 at 15:12

Extra vertical space on SVG

1 Answers1