为什么font-size为0后margin也为0，但line-height为0后margin却不为0？
在这个问题下：
在按钮1~4后添加文字后，为什么trigger按钮上方出现了空格
看到了这个答案：
那不是间距 是 由于 文符带来的基线冗余，其实就是行高，解决办法就是font-size:0或者line-height：0；
改了font-size之后的确消除了间距（使margin为0了）
但是改了line-height之后却没用
这是font-size的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动去空格</title>
<style>
button { margin: 0; }
p { clear: both; }
</style>
</head>
<body style="font-size:0;">
<button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><p><input type="button" id="trigger" value="点击按钮浮动"></p>
<script>
var trigger = document.getElementById("trigger"),
buttons = document.getElementsByTagName("button");
var length = buttons.length;
if (trigger && length > 0) {
trigger.onclick = function() {
for (var index = 0; index < length; index += 1) {
buttons[index].style["cssFloat" in trigger.style? "cssFloat": "styleFloat"] = "left";
}
};
}
</script>
</body>
</html>
效果（的确消除了间距，使margin为0了）：
这是line-height的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动去空格</title>
<style>
button { margin: 0; }
p { clear: both; }
</style>
</head>
<body style="line-height:0;">
<button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><p><input type="button" id="trigger" value="点击按钮浮动"></p>
<script>
var trigger = document.getElementById("trigger"),
buttons = document.getElementsByTagName("button");
var length = buttons.length;
if (trigger && length > 0) {
trigger.onclick = function() {
for (var index = 0; index < length; index += 1) {
buttons[index].style["cssFloat" in trigger.style? "cssFloat": "styleFloat"] = "left";
}
};
}
</script>
</body>
</html>
效果（没有消除间距，margin不为0）：
个回答
-
- qq_aslongas_0
- 2017-08-24 10:54:09
可以呀，我把你代码复制过来试下，完全可以，但你的button标签后没有文字，效果不是很明显，
这里有三种方法可以实现margin为0，达到没有空格的效果，
1、font-size设置为0，如果button后面有文字，这个方法就不太好，font-size为0后，文字根本显示不出来，而且，不用点击按钮，按钮就自动聚在一起，
2、line-height，line-height不要设置为0，不然效果出来会很丑，行高和按钮高度一样就可以了，我这里设置的是32px,而且可实现点击，
3、margin 明明没设置，但它存在，是因为一些默认样式，去掉默认就好了，可以添加*{margin：0；padding：0;}语句，就可以了
你可以试试
-
- qq_Amo_0
- 2017-07-28 14:22:01
font-size:0;是设置文字大小的，margin是设置偏移位置的。文字为0自然间距也小了