equals Margins between elements

Question

I have 4 divs inside another one.

I want inside divsto have equals margins between them so there is the same space between left edge of root div and first inside div, between two inside div and between last inside divand the right edge of root.

Now i can see this

http://jsfiddle.net/rXYqR/

Is there any way to do this with any specially property of CSS? Or i had to assign margins manually?

Thanks!

`#root * {margin:inherit;}`? if thats not what you want, try describing it in a less confusing way. — PlantTheIdea, Jun 11 '13 at 16:16
This sounds like exactly the same question [that was asked here](http://stackoverflow.com/questions/16964294/how-to-evenly-space-many-inline-block-elements/16964570). It turned out to be a surprisingly difficult question -- we didn't find a good answer that included the margin on the sides as well as between the elements. — Spudley, Jun 11 '13 at 16:21
@Spudley down there is a good answer that solve this problem (i think)! — Bae, Jun 12 '13 at 07:07

score 3 · Accepted Answer · edited Jun 11 '13 at 16:32

3

#root{
    background: red;
    width: 400px;
    font-size:0;
}

#root > div{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: blue;
    margin-left: calc((100% - 200px) / 5); /* Pre-calced 40px */
}

jsfiddle: http://jsfiddle.net/rXYqR/2/

edited Jun 11 '13 at 16:32

Hemerson Varela

24,034
16
68
69

answered Jun 11 '13 at 16:25

Robert McKee

21,305
1
43
57

Wow! i don't know 'calc' exists! it's great! Thanks! – Bae Jun 12 '13 at 07:02
It does for all good browsers. Chrome, Firefox, and IE 9+ all support it. Safari 6 supports it with a vendor prefix, but it crashes the browser a lot. – Robert McKee Jun 12 '13 at 07:11

equals Margins between elements

1 Answers1