移除可点击Div两侧空白并保持居中的技术咨询

问题原因 #

你当前的代码中，<a>标签默认是行内元素，它会占据父容器的整个宽度，导致按钮左右的空白区域也能被点击。而你把居中属性margin:auto加在内部的<div>上，当尝试将<div>设为inline-block时，margin:auto对行内块元素失效，所以按钮会左移。

解决方案 #

方案1：直接将样式应用在<a>标签上（推荐，减少嵌套）

不需要额外的<div>，把<a>设置为块级元素，直接赋予按钮样式，同时通过margin:auto实现居中：

<a href="google.com" style="display:block; margin:auto; width:200px; font-size:20px; font-weight:100; border-radius:8px; background-color:#34ac00; padding:16px; color:white; text-align:center; text-decoration:none;">
Quit Drinking Now
</a>

• display:block让<a>成为块级元素，支持margin:auto居中
• text-decoration:none去掉链接默认的下划线，优化视觉体验
• 此时点击区域完全匹配按钮范围，不会有左右空白

方案2：保留<div>的情况下调整<a>样式

如果必须保留内部<div>，可以给<a>设置固定宽度并居中，让<div>继承<a>的宽度：

<a href="google.com" style="display:block; margin:auto; width:200px;">
  <div style="width:100%; font-size:20px; font-weight:100; border-radius:8px; background-color:#34ac00; padding:16px; color:white; text-align:center;">
    Quit Drinking Now
  </div>
</a>

• <a>设为块级元素并居中，宽度与按钮一致
• <div>的width:100%确保它填满<a>的范围，点击区域不会超出按钮

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