Question

<!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”跨度之间有空格？

http://jsfiddle.net/KQRHW/10/

Answer 1

换行=空格

而不是

<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>

你的小提琴更新了

http://jsfiddle.net/KQRHW/12/

这两个例子将生成一个空格

1

<span>Hi</span> <span>Hello</span>

2

<span>Hi</span>
<span>Hello</span>

这个不会产生任何空间

<span>Hi</span><span>Hello</span>

Answer 2

另一个解决方案是在您的跨度中添加浮动 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>

填充时为什么元素之间有空格：0和边距：0？

2 个答案: