如何创建我想要的尺寸的正方形？

Question

我感到有点惭愧，这应该很简单，但我根本不明白该怎么做......; - ）

我只想创建外部大小为40x40且内部填充/边距为2px的正方形。所以我尝试了这个：

<span class="square-row">
  <span style="width:40px; height:40px; display:inline-block;">
     <span style="margin:2px; display:inline-block;"> </span>
  </span>

  ...

我得到一个我想要的尺寸的正方形，但内部正方形正在折叠并变为0x0。

我有一个“内部”方块的原因是它应该有不同的背景颜色。

我该怎么做？

更新：是的，我可以通过在内部正方形上设置特定的高度和宽度来实现。它适用于这种情况，但我想了解它应该如何工作。

Answer 1

这些都是你想要的吗？

http://jsfiddle.net/HrtsX/

如果没有，你能加一张你想要的照片吗？

编辑：正如animuson所述，边距适用于元素的外部，而填充影响内部。见http://www.goer.org/HTML/intermediate/margins_and_padding/

Answer 2

It seems to work for me。请注意，我将背景颜色更改为红色，以便我可以看到正方形。

Answer 3

在正方形外面应用保证金。您应该使用填充将应用于方块中。