<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<div style="padding:0; margin:0;border-style:solid; border-color:red;">
<span style="padding:0; margin:0;border-style:solid; border-color:green;">Hi</span>
<span style="display:inline-block;padding:0; margin:0;border-width:1px; border-style:solid; border-color:blue;">Hello</span>
</div>
</body>
</html>
为什么“Hi”和“Hello”跨度之间有一个空格？
换行=空格
而不是这个
<span style="padding:0; margin:0;border-style:solid; border-color:green;">Hi</span>
<span style="display:inline-block;padding:0; margin:0;border-width:1px; border-style:solid; border-color:blue;">Hello</span>
做这个
<span style="padding:0; margin:0;border-style:solid; border-color:green;">Hi</span><span style="display:inline-block;padding:0; margin:0;border-width:1px; border-style:solid; border-color:blue;">Hello</span>
你的小提琴更新了
这两个例子会产生一个空格
1
<span>Hi</span> <span>Hello</span>
2
<span>Hi</span>
<span>Hello</span>
这个不会产生任何空间
<span>Hi</span><span>Hello</span>
另一个解决方案是在你的 span 中添加浮点数 Fiddle Here
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style type="text/css">
*{margin:0;padding:0;}
span{
float:left;
}
</style>
<body>
<div style="border-style:solid; border-color:red;height:20px;">
<span>Hi</span>
<span style="display:inline-block;border-width:1px;">Hello</span>
</div>
</body>
</html>