[分享]css两个按钮中间距离

在网页设计中，经常会需要在两个按钮之间添加一定的距离，以增强用户体验和页面美观性。下面介绍两种方法来实现这一效果。.btn { display: inlineblock; margin: 0 10px...

在网页设计中，经常会需要在两个按钮之间添加一定的距离，以增强用户体验和页面美观性。下面介绍两种方法来实现这一效果。

.btn {
  display: inline-block;
  margin: 0 10px; /* 按钮之间的距离为10px */
} 

以上代码使用了CSS中的margin属性，在按钮之间添加了10px的空白。这个方法简单易懂，适用于两个相邻的按钮之间添加距离。

.btn-wrapper {
  display: flex;
  justify-content: space-between; /* 按钮自适应宽度，剩余空间平均分配 */
}
.btn {
  flex-grow: 1; /* 按钮自适应宽度 */
} 

以上代码使用了CSS3中的flex布局，通过设置按钮的自适应宽度和剩余空间平均分配来实现两个按钮之间的距离。这个方法适用于需要添加多个按钮并自动平均分配宽度的情况。