span元素右侧自动出现空格，已设margin/padding为0如何去除？

这不是margin或padding的锅——span是行内元素，浏览器会把HTML代码里的换行、空格这类空白字符解析成单个空格，所以才会看起来每个span右侧有空格。

下面是几种实用的解决方法：

方法1：去掉HTML里的换行/空格 #

直接把span标签连在一起写，彻底消除空白字符：

<span>This is a span</span><span>This is a span</span><span>This is a span</span><span>This is a span</span>

方法2：用CSS的font-size: 0技巧 #

给span的父元素设置font-size: 0，让空白字符的大小变成0，再单独给span恢复字体大小：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* 这里假设父元素是body，也可以给父元素加自定义类名 */
body {
  font-size: 0;
}
span {
  border: 2px solid green;
  font-size: 16px; /* 根据需求调整字体大小 */
}

方法3：用flex布局消除空白 #

把父元素设置为flex容器，flex布局会自动忽略行内元素之间的空白：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
}
span {
  border: 2px solid green;
}

方法4：用HTML注释“吃掉”空白 #

在span之间插入注释，把换行产生的空白字符覆盖掉：

<span>This is a span</span><!--
--><span>This is a span</span><!--
--><span>This is a span</span><!--
--><span>This is a span</span>

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