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

なぜ「こんにちは」と「こんにちは」の間にスペースがあるのですか?

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

4

2 に答える 2

11

改行＝スペース

これの代わりに

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

これらの 2 つの例では、1 つのスペースが生成されます

1

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

2

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

これはスペースを生成しません

<span>Hi</span><span>Hello</span>
于 2012-11-28T15:52:36.640 に答える
0

別の解決策は、スパンにフロートを追加することです 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-28T15:58:58.073 に答える