Strange gap between two buttons

This question already has an answer here:

How do I remove the space between inline-block elements? 32 answers

---

The problem is that in inline-block elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:

Use font-size: 0 to parent container(you have to define font-size to child elements):

.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
  font-size: 0;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
}

<div class="buttons">
  <button>Button1</button>
  <button>Button2</button>
</div>

---

It's because you have whitespace between button elements. Change your HTML to:

Fiddle

<div class="buttons">
    <button>Button1</button><button>Button2</button>
</div>

---

If you just want to display one line between these button s, add margin: -1px .

Fiddle

button {
    background-color: transparent;
    border: 1px solid dimgray;
    width: 150px;
    height: 40px;
    margin: -1px;
    cursor: pointer;
}

---

Additional Tweaks:

In Firefox, when you click on a button, it displays a weird dotted border like below:

Fiddle

To get rid of this, add this to your CSS:

button::-moz-focus-inner {
    border: 0;
}

---

One more thing(Firefox): when you click on the button, the text moves. To prevent this add this to your CSS:

Fiddle

button:active {
    padding: 0;
}

---

它可以通过修正

button {
    background-color: transparent;
    border: 1px solid dimgray;
    width: 150px;
    height: 40px;
    cursor: pointer;
    float:left;
}

链接地址: http://www.djcxy.com/p/89278.html

上一篇: 内联之间如何摆脱不需要的空间

下一篇: 奇怪的两个按钮之间的差距