Why font-family sporadically adds 1px gap between buttons?

后端未结

关注

 8  825

Please read the question carefully. It\'s not the same as the one about How to remove the space between inline-block elements.

Consider the followin

相关标签:

8条回答

说谎

2020-12-16 13:01

use the below css for this: 

.my-class {
  display: inline-block;
  margin-left: -4px;
  border: 1px solid #cccccc;
  padding: 20px;
  margin-right:-1px;
}

0 讨论(0)

没有蜡笔的小新

2020-12-16 13:03

DEMO

The problem is that there are hidden spaces (a line break and a few tabs counts as a space, just to be clear) between tags. Minimize the HTML or comment the spaces out and everything will work correct:

body {
  font-family: Arial;
}

.my-class {
  display: inline-block;
  margin-left: -4px;
  border: 1px solid #cccccc;
  padding: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <button class="my-class">Hello</button><!--
    --><button class="my-class">Stack</button><!--
    --><button class="my-class">Overflow</button>
  </div>
</body>
</html>

0 讨论(0)

上一页 1 2