CODEWITHSUNDEEP
htmlcss
Leo
Leo

Reputation: 4438

How do I create squares of the size I want?

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 40x40 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.

Upvotes: 1

Views: 270

Answers (3)

user554546
user554546

Reputation:

It seems to work for me. Note that I changed the background color to red so that I could see the square.

Upvotes: 1

animuson
animuson

Reputation: 54797

A margin is applied outside the square. You should be using padding to apply it inside the square.

Upvotes: 0

ssell
ssell

Reputation: 6597

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/

Upvotes: 2

Related Questions