Question

.domino元素之间有额外的空间为什么，我怎么能摆脱它？

＆＃13;

.domino{
  letter-spacing: 0px;
  display: inline-block;
  background-color: #e0d0b0;
  height: 150px;
  width: 100px;
  border-radius: 10px;
  text-align: center;
  font-size: 400%;
  font-family:Arial Black;
  position: relative;
  color: rgba(230,0,0, 0.9);
  text-shadow: 
    -1px 1px rgba(255,255,255,0.75),
    1px -1px rgba(0,0,0,0.5),
    2px -2px rgba(0,0,0,0.5),
    3px -3px rgba(0,0,0,0.5);
}

.domino .heart{
  content: "❤";
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  font-size: 60%;
}
.heart:after{
  position: absolute;
  content: "";
  height: 50px;
  width: 50px;
  border-radius: 50px;
  left: 27px;
  background: 
  -webkit-box-shadow: inset 2px -2px 2px 0px rgba(255,255,255,0.75), inset -2px 2px 2px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 2px -2px 2px 0px rgba(255,255,255,0.75), inset -2px 2px 2px 0px rgba(0,0,0,0.5);
  box-shadow: inset 2px -2px 2px 0px rgba(255,255,255,0.75), inset -2px 2px 2px 0px rgba(0,0,0,0.5);
}
.heart:before{
  position: absolute;
  content: "";
  box-shadow: -1px 1px 1px 0px rgba(255,255,255,0.6), inset -2px 2px 1px 0px rgba(0,0,0,0.75);
  left: 45px;
  top: 23px;
  height: 10px;
  width: 10px;
  border-radius: 10px;

}
#rack{
  margin: 25% 10%
}
.wood {
  border-radius: 5px;
  position: relative;
  background-image: radial-gradient(#EFBF7F,#955724);
  -webkit-background-size: 100%;
  padding: 20px 20px 35px 35px;
  z-index: 0;
  max-width: 460px;
  box-shadow:
    -2px 4px rgb(100,50,25),
    -4px 6px rgb(100,50,25),
    -6px 8px rgb(100,50,25),
    -8px 10px rgb(100,50,25),
    -10px 12px rgb(100,50,25),
    -45px 25px 5px rgba(0,0,0,0.5);
}

/* Background from http://lea.verou.me/css3patterns/#upholstery */
body{
  background:
  radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
  radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
  radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
  radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
  radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
  radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
  radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
  radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
  linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
  linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
  background-color: #300; 
  background-size: 100px 100px;
}

.green{
  color: rgba(0,180,100, 0.9);
}

.orange{
  color: rgba(255,150,0, 0.9);
}

.black{
  color: rgba(0,0,0, 0.75);
}

＆＃13;

<div id="rack">
  <div class="wood">
    <span class="domino green">
      <span class="num">4</span>
      <span class="heart">❤</span>
    </span>
    <span class="domino orange">
      <span class="num">2</span>
      <span class="heart">❤</span>
    </span>
     <span class="domino">
      <span class="num">0</span>
      <span class="heart">❤</span>
    </span>
    <span class="domino black">
      <span class="num">6</span>
      <span class="heart">❤</span>
    </span>
    <span class="domino">
      <span class="num">9</span>
      <span class="heart">❤</span>
    </span>
  </div>
</div>

＆＃13;

http://codepen.io/eguneys/pen/qdzvgp

Answer 1

这是因为您正在使用display：inline-block;这并不完全忽略你的HTML中的空格。

这方面的解决方法是：

修改您的代码并使用float: left代替
将font-size: 0添加到父包装并再次重置子元素的字体大小。
从dominos divs

使用float：left（和一个虚拟清晰div）的工作示例 - http://codepen.io/anon/pen/oXrVRd

Answer 2

这是因为display: inline-block使用float:left来解决此问题。

Display: Inline block - What is that space?

Answer 3

您可以将多米诺骨牌类的显示更改为表格单元格和木材类显示到表格。

您可以为多米诺骨牌课程添加余量。

所有这些都取决于你想要的方式。

Answer 4

我同意每个人关于更改显示的答案的一部分：inline-block to float：在div元素上留下“class domino”。

除此之外，我的建议是将父级div的宽度更改为“wood”类为auto，但保留我认为的预期填充值。如果向该元素添加浮动以及使用“domino”类添加到子span元素，则可以获得所需的效果。请参阅下面的建议更改，如果我误解了您要做的事情，请纠正我。

.domino{
  letter-spacing: 0px;
  /* display: inline-block; Remove this */
  float:left; /* Add this */
  background-color: #e0d0b0;
  height: 150px;
  width: 100px;
  border-radius: 10px;
  text-align: center;
  font-size: 400%;
  font-family:Arial Black;
  position: relative;
  color: rgba(230,0,0, 0.9);
  text-shadow: 
    -1px 1px rgba(255,255,255,0.75),
    1px -1px rgba(0,0,0,0.5),
    2px -2px rgba(0,0,0,0.5),
    3px -3px rgba(0,0,0,0.5);
}

.wood {
  border-radius: 5px;
  float:left; /* Add this */
  position: relative;
  background-image: radial-gradient(#EFBF7F,#955724);
  -webkit-background-size: 100%;
  padding: 20px 35px 20px 35px; /* If you intend to have 20px on top and bottom and 35px on sides */
  z-index: 0;
  width: auto; /* Change width to auto */
  box-shadow:
    -2px 4px rgb(100,50,25),
    -4px 6px rgb(100,50,25),
    -6px 8px rgb(100,50,25),
    -8px 10px rgb(100,50,25),
    -10px 12px rgb(100,50,25),
    -45px 25px 5px rgba(0,0,0,0.5);
}

Answer 5

我玩你的codepen，我在两种方式之间没有间隙：

1）添加

.domino { margin-left: -4px; }

2）改变

.domino { display: inline-block; }

到

.domino { float: left; }

导致.wood崩溃，所以添加

.wood { display: table; }

木材再次膨胀恢复正常

尽管没有保证金，额外的空间为何？

5 个答案: