在 css 中使用 flex 调整文本和按钮边框之间的间距
[英]adjust the space between text and button border using flex in css
问题描述
I try to create a Button with icon and text inside of it and set up CSS using flex.
我尝试在其中创建一个带有图标和文本的按钮，并使用 flex 设置 CSS。 How can I write CSS so I can set up space between the Text inside of the button and border of button?如何编写 CSS 以便在按钮内部的文本和按钮的边框之间设置空间？ In my attached image, I want to change space on left from 16px to 4px without changing the margin from icon.在我附加的图像中，我想将左侧的空间从 16 像素更改为 4 像素，而不改变图标的边距。 I try to use padding.我尝试使用填充。 but it does not work但它不起作用
.btn { display: flex; justify-content: center; padding: 8px 16px 8px; width: 163px; height: 32px; background-color: DodgerBlue; font-size: 14px; }.fa-folder { margin-left: 8px; } /* Darker background on mouse-over */.btn:hover { background-color: RoyalBlue; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <button class="btn">Text Text<i class="fa fa-folder"></i></button>
1 个解决方案
解决方案1
0 2021-05-21 15:27:29
Try this, I have added span in button added padding-left to right.试试这个，我在按钮中添加了跨度，从左到右添加了填充。
.btn { display: flex; justify-content: center; padding: 8px 16px 8px; width: 163px; height: 32px; background-color: DodgerBlue; font-size: 14px; }.btn span{ padding: 0px 16px 0px 8px; }.fa-folder { margin-left: 8px; } /* Darker background on mouse-over */.btn:hover { background-color: RoyalBlue; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <.-- Add icon library --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <button class="btn"><span>Text Text</span><i class="fa fa-folder"></i></button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.