Question

我有一个16x16px的SVG，10px的填充和1px的边框，由于某种原因，高度是40px而不是38px，就像宽度一样（在我的本地网站上，它实际上是36.95x44px）。我该怎么做才能消除这个额外的空间并实现完美的方形？

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

这是因为您的<svg>元素默认显示为内联。如果您在元素上明确声明display: block，则高度将正确计算。

当内联显示处于活动状态时，元素通常会出现“无法控制”的情况。身高因为：

你cannot explicitly dictate vertical dimensions - 无论是边距，填充，高度上的内联元素，都会导致不可预测的尺寸和
元素的垂直高度是从文本节点继承的influenced by line height。

＆＃13;

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

＆＃13;

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

＆＃13;

SVG上的额外垂直空间

1 个答案: