CODEWITHSUNDEEP
css
JustAsking
JustAsking

Reputation: 149

CSS Positioning: Creating exact overlap with negative margin is off by several pixels

I have 2 divs I want to exactly overlap horizontally using negative margin-left.

HTML:

<div id=one></div>
<div id=two></div>

CSS:

body{margin:0px;padding:0px,border:0px}

#one  {width:100px;height:100px;background-color:red;}
#two  {width:100px;height: 50px;background-color:blue;}

#one,#two{display:inline-block;}

#two{margin-left:-100px;}

Before negative margin each div is 100px wide:

enter image description here

After negative margin the divs are 4px from overlapping exactly:

enter image description here

Why does setting a negative margin on the second div not cause it to exactly overlap the first div?

BTW, I'm just experimenting with margin-left...I know I can absolutely position the 2 divs inside a relative wrapper.

Thanks in advance for any enlightenment!

Upvotes: 0

Views: 802

Answers (2)

Michael
Michael

Reputation: 7092

Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.

margin-left: -104px;

This will fix your issue, but it's also not the only way to fix it.

You could do this... Instead of:

<div id=one></div>
<div id=two></div>

Delete the line-break between the div's so they are this:

<div id=one></div><div id=two></div>

This will also fix the issue.

You could alternatively set the font-size of their containing element to 0.

HTML:

<div class="container">
<div id=one></div>
<div id=two></div>
</div>

CSS:

.container { font-size: 0; }


But wait! There is more. You could comment out the line-break.

<div id=one></div><!--
--><div id=two></div>

You could drop the ending > to the beginning of the next element.

 <div id=one></div
><div id=two></div>

Upvotes: 0

Jason
Jason

Reputation: 78

Inline elements are sensitive to their structure in your HTML. Since both divs are separated by a line break, they have a small "margin" between them like letters in a sentence would (which is pretty much the point of inline elements).

<div id=one></div> <!-- Here -->
<div id=two></div>

Change the structure of your HTML to remove this space:

<div id=one></div><div id=two></div>

Or you can use comments to negate the line break:

<div id=one></div><!--
--><div id=two></div>

Upvotes: 1

Related Questions