无法向位于按钮上方的图标添加上边距
无法向位于按钮上方的图标添加上边距
提问于 2017-02-06 00:15:41
我给按钮添加了一个方框图标，如下所示：
#wrapper{
text-align: center;
}
#wrapper:after{
content: "\f0a9";
font-family: 'FontAwesome';
color: #000;
font-size: 16px;
margin-left: -30px;
}
#button{
padding-right: 30px;
height: 40px;
}
<div id="wrapper">
<input id="button" type="submit" value="Download Now"/>
</div>问题是图标看上去不太正确。它太高了几像素，但我想不出怎么调整它。边距和填充也移动按钮，这样它就不会改变任何东西。玩垂直对齐改变它，但它仍然有一些像素外，我想要一个像素完美的位置。
如何降低/提高图标？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-06 00:18:37
添加position: relative;和top: 3px;将使其向下移动几个像素。
#wrapper{
text-align: center;
}
#wrapper:after{
content: "\f0a9";
font-family: 'FontAwesome';
color: #000;
font-size: 16px;
margin-left: -30px;
position: relative;
top: 3px;
}
#button{
padding-right: 30px;
height: 40px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="wrapper">
<input id="button" type="submit" value="Download Now"/>
</div>
Stack Overflow用户
发布于 2017-02-06 00:35:40
如果您将包装器放在input旁边，并将其更改为position: absolute，并使用与输入的行高匹配的height，则应该可以做到这一点：
#wrapper{
text-align: center;
}
#wrapper:after{
content: "\f0a9";
font-family: 'FontAwesome';
color: #000;
font-size: 16px;
margin-left: -30px;
position: absolute;
line-height: 40px;
}
#button{
padding-right: 30px;
height: 40px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input id="button" type="submit" value="Download Now" /><span id="wrapper"></span>
它还具有与输入高度相匹配的额外优势，因此您不必使用试错来猜测上边距。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42058829
复制相关文章
相似问题
腾讯云开发者
