主页 / 问题 / 586511
Accepted
Илья Бизунов
Asked:2020-11-04 00:51:19 +0000 UTC2020-11-04 00:51:19 +0000 UTC

为什么下面的按钮不一样？

  • 772

我想编写 CSS 来制作类似于材料设计的按钮button。a写了样式，但是如果你给元素应用样式a，那么它就变button低了一个像素。为什么？

.material-button {
    display: inline-block;
    background-color: #507299;
    border: none;
    border-radius: 2px;
    
    padding-left: 16px;
    padding-right: 16px;

    height: 36px;
    line-height: 36px;
    white-space: nowrap;

    font-family: RobotoMedium;
    font-size: 14px;
    /*text-align: center;*/
    text-transform: uppercase;
    color: #ffffff;
}

.material-button:hover,
.material-button:visited,
.material-button:link,
.material-button:active {
    color: #ffffff;
    text-decoration: none;
}
<a role="button" class="material-button" >
  Запись
</a>

<button type="button" class="material-button" >
  Копировать
</button>

html

1 个回答

  1. Best Answer

    1. 同时重置顶部和底部填充。

    2. 对于 firefox，建议通过重新设置 padding 和 border ::-moz-focus-inner。在技​​巧中，建议将指令添加!important并包含在 @-moz-document url-prefix(http://) { }.

    /* 2. */
.material-button::-moz-focus-inner {
  border: 0;
  padding: 0 16px;
}        

.material-button {
    display: inline-block;
    background-color: #507299;
    border: none;
    border-radius: 2px;
    
    /* 1. */
    padding: 0 16px;

    height: 36px;
    line-height: 36px;
    white-space: nowrap;

    font-family: RobotoMedium;
    font-size: 14px;
    /*text-align: center;*/
    text-transform: uppercase;
    color: #ffffff;
}

.material-button:hover,
.material-button:visited,
.material-button:link,
.material-button:active {
    color: #ffffff;
    text-decoration: none;
}
    <a role="button" class="material-button" >
  Запись
</a>

<button type="button" class="material-button" >
  Копировать
</button>

    • 3

相关问题