如何去除非Grid布局按钮网格的外部边距？

一、消除网格外部边距 #

你当前用inline-block实现按钮自动换行，但每个按钮的margin:7px会让外层容器左右多出空隙。CSS不支持负内边距，我们可以给外层容器加负外边距抵消按钮的外边距，再配合overflow:hidden防止内容溢出：

修改外层div的样式：

<div style="text-align: center; border-style:solid; margin: -7px; overflow: hidden;">

这样容器的负外边距刚好抵消按钮的7px外边距，实现容器边缘与按钮贴合，同时按钮之间仍保留14px的间距（左右margin叠加）。

如果想更灵活，也可以改用Flex布局（无需Grid），控制间距和对齐更方便：

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px; /* 按钮之间的间距，替代margin */
  border-style: solid;
}
.qlink {
  border: none;
  background-color: #1F70C4;
  color: white;
  height: 35px;
  width: 150px;
  font-size: 12px;
  font-weight: bold;
}
.qlink:hover {background: #2484E9;}
.qlink:active {background: #155292;}

对应的HTML只需把外层div的class设为button-container即可，这种方式不用处理负边距，逻辑更简洁。

二、BBEdit预览中的虚线问题 #

这个虚线是a标签默认下划线导致的：你的a标签是行内元素，HTML里按钮之间的换行/空格会被解析成空白字符，而a标签默认带有text-decoration:underline样式，这些空白字符的下划线就会显示成“虚线”。

解决方法很直接，给a标签去掉下划线：

a {
  text-decoration: none;
}

如果要优化点击区域，还可以把a标签设为inline-block，和按钮的display属性保持一致，彻底避免空白字符的影响：

a {
  text-decoration: none;
  display: inline-block;
}

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