Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)

I have an HTML input.

The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).

However using width: 100%; causes the input to be 100% + 20px how can I get around this?

Example

1 Answer

0 votes
by (40.7k points)

Try using box-sizing: border-box. 

Refer to this demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {

    width: 100%;

    box-sizing: border-box;

}

Note: The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers

Refer to this: https://caniuse.com/#feat=css3-boxsizing It will work in all modern browsers and IE8+.

Related questions

31k questions

32.8k answers

501 comments

693 users

Browse Categories

...