为何设置CSS宽高后，a标签模拟的Button尺寸未更新？

你的按钮宽高不生效的核心原因是：<a>标签默认是行内元素，行内元素的尺寸由内部文本内容决定，无法通过width和height直接指定宽高。

解决方法 #

给.button添加display属性，将其转为支持宽高设置的元素类型，两种常用方式：

方式1：转为行内块元素（推荐） #

保留元素可与其他内容同行的特性，同时支持宽高设置：

.button{
  text-align: center;
  font-size: 24px;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-decoration: none;
  border: 2px solid #ccc;
  border-radius: 7px;
  font-family: 'Noto Sans';
  background-color: #8361ff;
  color: white;
  display: inline-block; /* 添加这一行 */
}

方式2：转为块级元素 #

元素会独占一行，同样支持宽高设置：

.button{
  text-align: center;
  font-size: 24px;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-decoration: none;
  border: 2px solid #ccc;
  border-radius: 7px;
  font-family: 'Noto Sans';
  background-color: #8361ff;
  color: white;
  display: block; /* 添加这一行 */
}

额外优化：如果需要让内部文本垂直居中，可以给.button添加line-height: 50px;（值与height一致），文本就能自动垂直居中。

内容的提问来源于stack exchange，提问作者Tristan Thompson