I have an element within another element. The parent is of a certain size. I want the child to be the exact same size, but at the same time have a padding.
If I don't know the exact size of the parent, is there any way to get it to be the same size as the parent and have a padding?
problem:
http://jsbin.com/odemu3/edit
Thanks.
On supported browsers, set box-sizing
to border-box
(CSS3 only). This causes the browser to calculate the width of an element as content + padding + border + margin (as opposed to content-box
in the CSS1/2 box model):
input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I believe inputs already have this setting by default, but this can also apply to any other child elements whose widths you want calculated like that.
Make the child element display:block
(which will cause it to fill the width of the parent) and either give the parent padding or give the child a margin. Do not try to specify a width on the child element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With