实现无文本图片导航按钮：消除Button边框与BackgroundImage间的间隙

这个问题我碰到过好多次了，默认按钮自带的内边距、背景布局规则或者固有样式，往往就是导致那一点点间隙的元凶。给你几个针对性的解决办法，按优先级试试：

1. 清空按钮的默认内边距 #

几乎所有UI框架的默认按钮都会自带几个像素的内边距，这是最常见的间隙来源：

• 桌面端框架（比如WinForms）：把按钮的Padding属性直接设为0，同时可以把FlatStyle改成Flat，减少默认样式的干扰。
• Web前端：给按钮添加padding: 0; margin: 0;的CSS样式，彻底清除默认内外间距。

2. 让背景图完全填满按钮区域 #

背景图的布局方式不对也会留空隙，要确保它能覆盖整个按钮的可点击区域：

• 桌面端（WinForms/WPF）：把BackgroundImageLayout（WinForms）或ImageBrush的Stretch属性（WPF）设置为Stretch；如果想保持图片比例不拉伸，选Zoom也可以，但要确保按钮尺寸和图片比例匹配，避免留白。
• Web前端：用background-size: cover让图片按比例填满按钮，或者background-size: 100% 100%强制拉伸，同时加上background-position: center和background-repeat: no-repeat。

3. 移除或自定义按钮边框 #

默认边框有时候会自带隐藏的“内间距”，或者和背景图的显示区域不匹配：

• 不需要边框的话：直接把BorderStyle设为None（桌面端）或border: none（Web）。
• 需要边框的话：自定义边框样式，比如桌面端设置FlatAppearance.BorderSize为你需要的尺寸；Web端用box-shadow代替默认边框，或者加上box-sizing: border-box确保边框包含在按钮尺寸内。

4. 代码示例参考 #

WinForms 示例 #

// 初始化导航按钮
var navBtn = new Button();
navBtn.Padding = new Padding(0);
navBtn.BackgroundImage = Properties.Resources.NavIcon;
navBtn.BackgroundImageLayout = ImageLayout.Stretch;
navBtn.FlatStyle = FlatStyle.Flat;
navBtn.FlatAppearance.BorderSize = 0; // 去掉边框，需要的话设为1
navBtn.Size = new Size(48, 48); // 匹配图片尺寸

Web前端 CSS 示例 #

.nav-button {
  padding: 0;
  margin: 0;
  border: none;
  width: 48px;
  height: 48px;
  background-image: url('nav-icon.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

这些方法基本能解决90%以上的间隙问题，如果还是不行，那可能是你用的框架有特殊的默认样式，这时候可以考虑自定义控件/组件，直接手动绘制背景图到整个控件区域，完全控制显示效果。

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