How to prevent the expansion of an external element when adding a supplement?

Question

I am not a designer. When writing CSS, it often happens that I need to add some addition to an element. How to avoid this add-on for distribution to the parent element?

HTML:

<div id="outer"> <input id="login"> </div> 

CSS

 #outer { width: 300px; } #login { width: 100%; padding: 1em; } 

If you use this HTML + CSS, you will see that the #outer element #outer larger than 300px . The simplest solution is to rewrite #login width to "300px - to_pixel(1em)" . It works well, but also means that the font size should now be fixed. Is there any other way when I don't need to convert everything to pixels?

Answer 1

What you want is a box-sizing property. Take a look at this jsFiddle for this in practice. Just add this:

 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 

to your #login CSS. This is supported in most modern browsers , including IE8 +.

Answer 2

The css box-sizing property can be used as follows:

 #outer { width: 300px; background:red; height:100px; } #login { width: 100%; padding: 1em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } 

http://jsfiddle.net/TQXdn/

box-sizing does not work in IE7

Answer 3

Yes, you have to fix it or adjust according to width + fill. The actual size when you use the registration will be

actual size = specified width + gasket width + border width

then if you want to limit it to the size of the container, take care in the CSS model field

 #outer { width: 300px; border:1px solid red; padding:1em; } #login { width: 100%; } 

He will place the entrance to the center of the container. Use Box Model as suggested in question comments.

Answer 4

There is my solution:

 width : calc( 100% - 10px ); padding: 5px; 

Answer 5

 #outer { width: 300px; background:red; height:100px; position: relative; } #login { position: absolute; left: 1em; right: 1em; top: 1em; bottom: 1em; } 

Look here:

http://jsfiddle.net/22ABj/