<i>在<按钮> </button> </i>内的额外空间

Question

我经常使用标志性字体，当我尝试在按钮内放置一个图标时，经常遇到同样的问题。

我有一个额外的空间，a̶n̶d̶̶I̶'̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶<<<<<<<<<<：

编辑：
您可以在此片段中看到最后一个按钮与前一个按钮的高度不同。这是由标志性字体中应用的默认font-size引起的。 A solution first provided by Tibbers是设置line-height属性。它可以工作，但按钮不再垂直对齐 所以问题就出现了：

如何更改按钮字体大小，保留其高度并使其垂直对齐？

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
input,
button {
    line-height: 20px;
    padding: 10px;
    border: 1px solid black;
    float: left;
}
button i:before {
    content: "\25b6";
    font-size: 20px;
    font-style: normal; 
}

<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>

有人知道我应该在哪里看吗？

为了说明我正在搜索的内容，我制作了几个屏幕：

1. 无变化



1. 使用line-height: 0;



1. 使用vertical-align: middle;



1. 使用line-height: 0; vertical-align: middle;



1. 的预期

Answer 1

这个怎么样？只需将display:block添加到i:before和line-height中的input，即可将所有3个元素对齐。

我已将line-height:20px添加到您的i:before，因为我在line-height

中将*重置为0

请参阅下面的代码段。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 0
}
input,
button {
  line-height: 20px;
  padding: 10px;
  border: 1px solid black;
  float: left;
}
input {
  line-height: 22px;
}
button i:before {
  content: "\25b6";
  font-size: 20px;
  font-style: normal;
  display: block;
  line-height: 20px;
}

＆＃13;

<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i>
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我已将其排序为将line-height设置为i:before元素

＆＃13;

＆＃13;

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    input,
    button {
        line-height: 20px;
        padding: 10px;
        border: 1px solid black;
        float: left;
     
    }
    button i:before {
        content: "\25b6";
        font-size: 20px;
        line-height: 15px;
        font-style: normal; 
    }

＆＃13;

    <input type="text" value="VALUE">
    <button>SEND</button>
    <button><i></i></button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将line-height：0添加到i：before：）

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}
input,
button {
    line-height: 20px;
    padding: 10px;
    border: 1px solid black;
    float: left;
    vertical-align: top;
}
button i:before {
    content: "\25b6";
    font-size: 20px;
    font-style: normal; 
    line-height: 0px;
    
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>

Answer 4

我看到的问题是特定的字符（▶）不是垂直居中的...只是选择它来理解我的意思。

我猜你可以更正它放置line-height:20px（与按钮中的文字相同），vertical-align:middle和顶部有一个小的负边距...如果你使用em单位这个属性你可以改变字体的尺寸，它仍然有效...我认为margin-top:-0.1em;就足够了。

这里是完整的解决方案

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
input,
button {
    line-height: 20px;
    padding: 10px;
    border: 1px solid black;
    float: left;
}
button i:before {
    content: "\25b6";
    font-size: 20px;
  line-height:20px;
    font-style: normal;
  display:block;
  vertical-align:middle;
  margin-top:-0.1em;
  margin-bottom:0.1em;
}

＆＃13;

<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>

＆＃13;

＆＃13;

＆＃13;

Answer 5

Mixin回答并测试我自己的想法，我终于找到了合适的解决方案。

首先，我发现\25b6字符不是完全垂直对齐。它位于中线下方的几个像素。所以我确实尝试了其他角色。

这是我的解决方案：

• 在height: 40px上使用line-height: 20px代替input, button（40 =行高+填充顶部+填充底部）
• 将display: table; line-height: 0;添加到i。 i元素本身具有默认的行高，此大小正在向下推动i:before元素。
• 将display: table-cell; vertical-align: middle;添加到i:before

最终代码：

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
input,
button {
    height: 40px;
    padding: 10px;
    border: 1px solid black;
    float: left;
}
button i {
    display: table;
    line-height: 0;
}
button i:before {
    content: "\25b6";
    font-size: 20px;
    font-style: normal; 
    line-height: 0;
    display: table-cell;
    vertical-align: middle;
}

＆＃13;

<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>

＆＃13;

＆＃13;

＆＃13;