i experimenting bit calc on css define external space (like external margin)
for example in 3 column layout, resulting width of central column bit diferent other two, can not figure out how make text same width.
there requirements need.
i need use padding, not margin.
i can not add padding container c3 in case.
i want solve using logic under calc. don't know if percentages applied first, or need define paddings first computer later solve percentages...
i prefer use border-box model, because solving me lot of problems on other places of code... can sacrifice one.
body { margin: 0; padding 0; } * { box-sizing: border-box; } p { text-align: justify; } .c3 { display: -webkit-flex; display: -ms-flexbox; display: flex; } .c3>div { width: 33.33%; padding: 50px; } .c3>div:first-child { background-color: #dfd; width: calc(33.33% + 140px); padding-left: 140px; } .c3>div:last-child { background-color: #fee; width: calc(33.33% + 140px); padding-right: 140px; }<section class="c3"> <div> <p>1. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus et enim justo, vitae vulputate eros. morbi nec ligula orci. donec vel risus eros.nunc est augue, varius sagittis aliquam a, mollis et sapien. in mollis adipiscing leo non bibendum.</p> </div> <div> <p>2. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus et enim justo, vitae vulputate eros. morbi nec ligula orci. donec vel risus eros.</p> </div> <div> <p>3. lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus et enim justo, vitae vulputate eros. morbi nec ligula orci. donec vel risus eros. nunc est augue, varius sagittis aliquam a, mollis et sapien. in mollis adipiscing leo non bibendum.</p> </div> </section>any ideas?
since you're using box-sizing: border-box, width includes padding. 140px being added twice.
width: 33.33% that's needed.
