CODEWITHSUNDEEP
css
SunnyShah
SunnyShah

Reputation: 30487

Why there is space between elements when padding:0 and 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>

​Why there is a space between "Hi" and "Hello" spans?

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

Upvotes: 1

Views: 102

Answers (2)

Dejo Dekic
Dejo Dekic

Reputation: 2126

Another solution is to add floats to your spans 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>

Upvotes: 0

Johan
Johan

Reputation: 19072

Line break = space

Instead of this

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

Do this

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

Your fiddle updated

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

These two examples will generate one space

1

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

2

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

This one will not generate any space

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

Upvotes: 11

Related Questions