css - 如何使跨度内的 unicode 包含父级的全宽和高度？

Question

这是我的 JS fiddle :https://jsfiddle.net/apasric4/ao7rLx0d/

您好，基本上当我按下滚动键时，我希望骰子的视觉效果看起来跨越它所在的 span 元素的整个宽度和高度。我还希望 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，玩完你的 fiddle 后，如果你将以下属性添加到你的 span 元素，它将占用父 div 的空间，即“骰子”

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