html - Child ignores parent's width/height when child has margin applied to it to create spacing -


i'm trying achieve attached image. it's simple concept. it's standard containing block requires children blocks positioned inside of it.

that in can achieve quite easily. tricky bit i'm struggling applying spacing (margins) child elements. when apply margins children space out required overflow outside of parent container.

how children maintain given dimensions (including margins) remain inside parent width? needs responsive design need percentage dimensions elements/styles.

the css i've tried below. appreciated.

#container { position:relative; display:inline-block; width:80%; height:20%; background:blue; box-sizing:border-box; font-size:0; }  .boxes { position:relative; display:inline-block; width:25%; height:100%; box-sizing:border-box; color:#555; border:solid 1px red; text-align: center; color:#fff; margin:2%; /* <- problem occurs ============= */ } 

enter image description here


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -