Why child input field is wider than parent div

Question

HTML

<div class="wrap">
    <input class="field" type="text">
    <textarea class="field" row="10"></textarea>
</div>

CSS

.wrap{width:300px;overflow:hidden;padding:10px;}
.field{display:block;width:100%;margin:10px 0;padding:10px;}

I expect width of text input and textarea should be exactly equal to parent div. but they are not . can anybody explain why?

Live code

dfsq · Accepted Answer · 2016-02-18T21:10:02.637

17

The total width is calculated as a sum of padding + width + borderWidth. This is the default behaviour of the box model. You can change it by using box-sizing property. In your case:

.field {
    ...
    box-sizing: border-box;
}

http://jsfiddle.net/aLz6b/3/

Further reading: http://css-tricks.com/box-sizing/

edited Feb 18 '16 at 21:10

answered Mar 23 '13 at 05:20

dfsq

191,768
25
236
258

score 3 · Answer 2 · answered Mar 23 '13 at 05:20

Its because you have padding applied to the .field remove padding and see it will work.

.field{display:block;width:100%;margin:10px 0;}

OR

you have 100% width set so just set width as below.

.field {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 280px;
}

score 1 · Answer 3 · answered Mar 23 '13 at 05:17

1

The width: 100% property applies to the content box, not the border box. If you are using CSS3 you can set box-sizing: border-box to obtain the expected size.

http://www.w3.org/TR/css3-ui/#box-sizing0

answered Mar 23 '13 at 05:17

dsh

12,037
3
33
51

score 0 · Answer 4 · answered Mar 23 '13 at 05:21

0

Try this:

.wrap{width:300px;overflow:hidden;padding:10px 0px;}

answered Mar 23 '13 at 05:21

Jesse

418
5
8

Why child input field is wider than parent div

4 Answers4