css - Eliminate the side effects of padding-left -
i have following code:
css
#page { width: 400px; height: 400px; border: 1px solid #f00; } #page #bar { width: 100%; padding-left: 10px; border: 1px solid #00f; }
html
<div id="page"> <div id="bar">1 2 3 4 5 6 7 8 9 0</div> </div>
what should put in css #page #bar
eliminate part outside red box ?
here jsfiddle.
just remove width: 100%;
block elements (like div
) fill containers' width default (taking care of paddings)
demo at http://jsfiddle.net/ege2y/1/
it no side-effect. how should based on current box-model.
if have (not in case) specify width can alter box-sizing
property of rule
#page #bar { width:100%; padding-left: 10px; border: 1px solid #00f; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
demo at http://jsfiddle.net/ege2y/4/
Comments
Post a Comment