Question

我想为我的按钮，链接和输入设置相同的样式。我的身高有问题，我无法确定原因。

在此示例中，我的按钮和输入高30像素，但我的链接只有29像素。

＆＃13;

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 2rem;
}

button, input, a {
  background: none;
  border: 1px solid grey;
  color: black;
  font-size: 1.6rem;
  outline: none;
  padding: 5px;
  text-decoration: none;
}

＆＃13;

<button>Hello</button>
<input type="text" placeholder="Hello" />
<a href="#">Hello</a>

＆＃13;

这有什么区别？

Answer 1

您需要确保所有元素的字体系列相同（目前您的锚具有不同的字体），并确保您的元素是块或内联块，否则填充不适用：< / p>

＆＃13;

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 2rem;
}

button,
input,
a {
  display: inline-block;
  font-family: arial;
  background: none;
  border: 1px solid grey;
  color: black;
  font-size: 1.6rem;
  outline: none;
  padding: 5px;
  text-decoration: none;
}

＆＃13;

<button>Hello</button>
<input type="text" placeholder="Hello" />
<a href="#">Hello</a>

＆＃13;

链接，按钮和输入具有相同的高度

1 个答案: