Question

I finally figured out the cause of my problem, but I cannot determine a solution, so your help is needed!

I’m trying to style a button, and it looks great in FireFox and Internet Explorer, but not in Chrome! I’m using negative margins here, but the issue still exists even if they’re positive margins.

Here’s the code, simplified to illustrate the problem:

<div style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> div </span>
</div> <!-- DIV works the same in all browsers -->

<button style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> button </span>
</button> <!-- BUTTON ignores margins in Chrome only -->

​
Here’s the expected result in FireFox:

And here’s the issue I see in Chrome:

See it yourself: http://jsfiddle.net/ScottRippey/SZV45/13/

It seems to me like the margins are being ignored. However, I cannot seem to disable margin collapsing for the button!
I’ve tried: display: inline-block; position: absolute; margin: 1px; padding: 1px; border: 1px solid white;

Any ideas?

Answer 1

Discard the negative margin, move the width/height to .button (and adjust for margin), and use position instead (example):

<div class="button">
    <span class="inner"> div </span>
</div>

<button class="button">
    <span class="inner"> button </span>
</button>

.button {
    display: inline-block;
    background: rgba(255,0,0,0.5);
    border: none;
    padding: 0;
    margin: 20px;
    position: relative;
    width: 60px;
    height: 60px;
    vertical-align: top;
}
.inner {
    display: block;
    background: rgba(0,0,255,0.5);
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
}