如何使跨度内的 unicode 包含父级的完整宽度和高度？

Question

所以基本上，当我按下滚动键时，我希望骰子的视觉效果看起来跨越了它所在的跨度元素的整个宽度和高度。我还希望该 span 元素占据其父容器 div 的 100%，类名为“dice”。

这是我的JS：

const btn=document.querySelector("button")
const player=document.querySelectorAll('.player')


player.forEach(player=> {
  diceDiv=document.createElement("div")
  span=document.createElement("span")
  player.appendChild(diceDiv)
  diceDiv.appendChild(span)
})



const diceRoll=(span)=> {
  let numOfDots = Math.floor(Math.random() * 6) + 1  
  span.innerHTML='&#9856'
}


btn.addEventListener('click', ()=> {
  player.forEach(player=> player.firstElementChild.classList.add("dice"))
  const spans=document.querySelectorAll('span')
  spans.forEach(span=> {
    diceRoll(span)
  })
}) 

但是，我尝试这样做，并且 unicode 骰子面仍然出现在我的 div 底部。这是为什么？

Answer 1

我希望这个游戏的主要目的是JS而不是CSS， 玩完小提琴后，如果您向 span 元素添加以下属性，它将占用父 div 的空间，即“骰子”

display: inline-block;
font-size: 202px;
margin-top: -72px;