What is preventing us from setting a child's width and height to match that of the parent element?

Question

Parent element is a div with a width of 300px and a height of 40px, containing a child input.

In the following code snippet:

myinput = document.getElementById("e2");
myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;'

div{
    width:300px;
    height:40px;
    border:1px solid red;
}

<div id="e1"><input id="e2" type="text" /></div>

The goal is to set the child's width and height to match the parent. However, using

myinput.style.cssText ='width:100%;height:100%'

results in the child element being larger than the parent.

Answer 1

Answer №1

make sure to include box-sizing: border-box; in your CSS

myinput.style.cssText ='width:100%;height:100%;box-sizing: border-box;'

Answer 2

make sure to include box-sizing: border-box; in your CSS

myinput.style.cssText ='width:100%;height:100%;box-sizing: border-box;'

Answer 3

To override the default border-width: 2px; of an input, you can set the input's border-width:0px; like this:

myinput = document.getElementById("e2");
myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;border-width:0px;'

div{
    width:300px;
    height:40px;
    border:1px solid red;
}

<div id="e1"><input id="e2" type="text" /></div>

Answer 4

To override the default border-width: 2px; of an input, you can set the input's border-width:0px; like this:

myinput = document.getElementById("e2");
myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;border-width:0px;'

div{
    width:300px;
    height:40px;
    border:1px solid red;
}

<div id="e1"><input id="e2" type="text" /></div>