css - Trying to give margin to evenly divs inside a container -

i have code:

<div class="container">     <div class="contained one">foobar</div>     <div class="contained two">foobar</div> </div>      -- css --  .container {     background: red;     width: 500px;     height: 200px; } .contained {        -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;     width: 50%;     float: left;     padding: 10px; } .one {     background: blue; } .two{     background: green; } 

i give margin around contained divs, don't know how..

it's padding. margin: 10px; example.

note margin needs calculated width of elements also. suggest giving % margins, make sure total % of margins plus widths = 100%.

you like...

.contained {        -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;     width: 45%;     margin: 2.5%;     float: left;     padding: 10px; } 

this works because (2.5left + 2.5right) * 2 boxes = 10% total margin space... 10% + 45% per box 10% + 90% = 100%

js fiddle

---

response question in comments:

because container has width, no matter width may be, can fit inside it. way css coded, "total" width of element includes defined width, border space, padding , margin. default way element operates. in code above, have box-sizing: border-box. tells browser calculate "width" property including padding , border. unfortunately there isn't code includes margin space.

so imagine this. have box can fit 100 100 balls in it, , still close lid of box. if have 101 balls, lid not close. lets want fit 50 blue balls , 50 red balls in box. can still close lid because don't exceed 100 ball limit. let's want amount of space between 50 red balls , 50 blue balls. let's imagine space empty "air", in reality, air takes space too. in order fit 10 "ball units" worth of air "space" between 2 groups of balls, 1 of 2 things needs happen in order still close lid of box.

you can either make box 10 units larger total 110 "ball units" - 50 red balls, 50 blue balls, , 10 air separating 2 groups. or, can remove few of balls inside container in order fit 10 "ball units" of air. have 45 blue balls, , 45 red balls , 10 units of air = 100 , close lid on box. long number of red balls, blue balls, , air equals boxes maximum 100 ball units, can fit , u can close lid. combination used. example have, 10 red balls, 10 blue balls, 10 green balls, 10 yellow balls, , 10 purple balls 10 units of air after each group. is...

10red + 10air + 10blue + 10air + 10green + 10air + 10yellow + 10 air + 10purple + 10 air

10+10+10+10+10+10+10+10+10+10 = 100

now... said, if hadn't used box-sizing: border-box; have include padding , border in calculations along margin.