为何CSS忽略<a>标签的margin与padding？按钮样式失效求助

问题根源 #

<a>标签默认是inline（行内）元素，这类元素嵌入文本流中，不支持上下方向的margin和padding——左右方向的内边距/外边距会生效，但上下的设置只会视觉上溢出，不会改变元素布局空间，也无法推动其他元素位移，这就是你设置的padding:1rem和margin:1rem 0完全失效的核心原因。

解决方案 #

给按钮类添加display: block或display: inline-block属性，将其转换为块级或行内块级元素，即可正常识别上下方向的margin和padding：

修改后的CSS代码

.bg-div {
  background-color : #b4d4e7;
  padding          : 0rem 1rem;
}

p{
  line-height: 2rem;
  margin: 0rem 0 1rem 3px;
}

.hyperlink-button {
  display             : block; /* 关键：转换为块级元素 */
  border-radius       : 14px;
  background-color    : transparent;
  border              : 2px solid #157ea1;
  padding             : 1rem;
  color               : #157ea1;
  transition-duration : 0.3s;
  margin              : 1rem 0rem;
  width               : fit-content;
}

补充说明

• 用display: block：按钮会独占一行，适配当前布局中按钮单独放置的场景；
• 若需要按钮和其他行内元素在同一行，可改用display: inline-block，同样支持完整的margin和padding设置。

修改后，按钮的上下margin会正常推动元素位移，padding也会完全作用于按钮内部，背景/边框会完整包裹按钮区域，解决样式异常问题。

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