There is extra space between .domino
elements why, how can I get rid of it?
.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);
}
<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>