Home/ Questions/Q 7407509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:44:02+00:00

I feel a bit ashamed, this should be simple, but I simply do not

  • 0

I feel a bit ashamed, this should be simple, but I simply do not understand how to do it… 😉

I just want to create squares with an outer size 40×40 and an inner padding/margin of 2px. So I tried this:

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

  ...

I get a square with the size I want, but the inner square just collapses and becomes 0x0.

The reason I have an “inner” square is that it should have a different background color.

How can I do it?

Update: Yes, I can do it by setting specific height and width on the inner square. And it works in this case, but I wanted to understand how this is supposed to work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Are either of these what you are seeking?

    http://jsfiddle.net/HrtsX/

    If not, could you add a picture of what you desire?

    edit: As animuson stated, margins apply to the outside of an element, while padding affects the interior. See http://www.goer.org/HTML/intermediate/margins_and_padding/

    • 0