爲什麼在padding：0和marging：0時元素之間有空格？

<!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」跨度之間有空格？爲什麼在padding：0和marging：0時元素之間有空格？

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

來源

2012-11-28 SunnyShah

斷行=空間

這

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

這兩個例子會產生一個空間

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

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

這其中不會產生任何空間

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

來源

2012-11-28 15:52:36 Johan

+1與inline-block的元素常見問題 –

另一個解決方案是浮動添加到您的跨度 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>

來源

2012-11-28 15:58:58

爲什麼在padding：0和marging：0時元素之間有空格？

回答

相關問題