具有相同宽度的按钮没有相同的宽度

Question

我正在styled-components应用程序中使用react。 以下是我的风格

export const SignUpNowButton = styled.button`
  background-color: #1d4ea3;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  color: #ffffff;
  border: 1px solid #1d4ea3;
  font-size: 17px;
  padding: 10px;
  width: 16em;
  text-align: center;
  margin-bottom: 10px;
  font-family: "SofiaProSemiBold";
`;

export const AlreadyAMemberButton = styled.div`
  background-color: #ffffff;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  color: #1d4ea3;
  border: 1px solid #1d4ea3;
  font-size: 17px;
  padding: 10px;
  width: 16em;
  text-align: center;
  font-family: "SofiaProSemiBold";
`;

<SignUpNowButton onClick={goToSignUp}>Sign up now</SignUpNowButton>
      <AlreadyAMemberButton onClick={goToLogin}>
        I am already a member
      </AlreadyAMemberButton>

以下是按钮的屏幕截图

我不明白为什么它们的宽度不同，因为它们具有相同的属性。

Answer 1

我认为某些东西继承了指定的元素。 “ 立即注册”是{{1}，并且“ 我已经是成员” styled.button-仅“ 立即注册< / strong>”的宽度正确（{styled.div，字体大小为16em的宽度为17px）。 “ 我已经是会员”按钮的宽度更大，请尝试将其更改为272px，与“ 立即注册”

相同

Answer 2

您的页面似乎没有CSS规则box-sizing: border-box。 试试

*{
  box-sizing: border-box
}

Answer 3

我将尝试对发生的原因进行简要说明（链接提供了更完整的说明）： 其中一个组件是样式。按钮，另一个是样式。 div 。所以：

按钮和div具有不同的默认属性。 button具有默认的box-sizing：边框-框；在大多数现代浏览器中（每个浏览器都有其默认值，这就是我们使用normalize.css or reset.css的原因）。 div具有默认的box-sizing：内容-框

• The box-sizing property告诉浏览器在计算宽度/高度时如何考虑填充。

因此，您必须以某种方式规范自己的风格。选择自己的冒险方式：

• 将两者设置为相同的box-sizing。
• 将它们都设置为相同的styled类型。 style.button或style.div，因此它们将继承相同的默认值。