CODEWITHSUNDEEP
htmlcss
Bae
Bae

Reputation: 912

equals Margins between elements

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!

Upvotes: 1

Views: 818

Answers (1)

Robert McKee
Robert McKee

Reputation: 21492

#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/

Upvotes: 3

Related Questions