CODEWITHSUNDEEP
htmlcssgoogle-chromemargin
Vitor Canova
Vitor Canova

Reputation: 3976

Why does Chrome not respects negative margin in this case?

I having problems with a very simple code.

Looks like Chrome is ignoring the negative margin-bottom I'm using. In IE11 works as expected.

IE 11

How it render in IE11

Chrome 38

How it render in Chrome 38

I just want to align them. I know I can achieve with more code but I'm wondering if I'm expecting margin-bottom work different than it should work:

<div id="main">
    <select>
        <option value="2014">2014</option>
    </select>
    <button></button>
    <select id="AmbientesSelect">
        <option value="TEST">TESTE</option>
    </select>
    <button></button>
</div>

This is the css:

#main {
    background-color:red;
}
#main button {
    width: 28px;
    height: 23px;
    border: solid 1px #ccc;
    margin-bottom: -7px;
}

Live reproduction: http://jsfiddle.net/v4bd7xjy/2/

I've searched some question but they are too specific or too different. Some of them:

Why Chrome doesn't respect the margin properly?

Negative margin-bottom rendering not correctly in Chrome

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Edit

If that matter I filled a bug report on Chromium project.

Upvotes: 2

Views: 3716

Answers (2)

pixelDino
pixelDino

Reputation: 105

Had similar Problem, in my case chrome doesn't recognize the correct dimension of the parent element.

<li>
  <span></span>
</li>

li {
  position: absolute;
}
span {
  margin-left: -50%;
}

display:block; does it for me...

span {
  display: block;
  margin-left: -50%;
}

Upvotes: 2

Bodzio
Bodzio

Reputation: 2520

Try add to your button vertical-align: top;

Upvotes: 2

Related Questions