如何为HTML方块实体设置背景颜色及黑色边框？

问题出在你用了块级元素<div>，它默认会占满父容器的宽度，导致背景色铺满整行。要让样式只作用在方块实体上，可通过以下两种方案解决：

方案1：基于方块实体调整样式 #

用行内元素<span>替代<div>，再通过样式让背景和边框仅包裹方块字符：

<span style="font-size:60px; background-color:#388004; border:2px solid black; padding:0 3px; line-height:1; display: inline-block;">&#9633;</span>

• display: inline-block：让行内元素可精确控制尺寸，避免多余横向空间
• padding:0 3px：微调内边距，让背景刚好覆盖方块字符
• line-height:1：避免字符上下出现多余背景区域

方案2：用CSS直接绘制方块（更可控） #

如果不需要依赖字符实体，直接用CSS绘制方块会更灵活，完全避免字符排版问题：

<span style="display:inline-block; width:60px; height:60px; background-color:#388004; border:2px solid black;"></span>

这种方式无需字符实体，直接通过宽高、背景和边框实现效果，尺寸与样式更易调整。

内容的提问来源于stack exchange，提问作者Automaton