Вход с шириной 100% внутри div перекрывает div

Question

У меня проблема с полем ввода шириной 100%, потому что он перекрывает контейнер div.

Я искал решения на форуме, и возможным решением было применить box- sizing: border-box, но он не работает.

Решение не работает для меня: CSS - Ввод с шириной 100% перекрывается div

jsfiddle: https://jsfiddle.net/igorac1999/fuovpkba/

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body, pre {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.container_calculator {
  width: 100%;
  max-width: 400px;
  background-color: tomato;
  border-radius: 5px;
  margin: 5px auto;
}

.container_calculator > label {
  display: inline-block;
  color: #fff;
  margin: 10px 0 0 20px;
}

.container_calculator > input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 20px;
}


div.result_bin2dec {
  border: 1px solid #edf2f7;
  background-color: #edf2f7;
  border-radius: 10px;
  margin-top: 30px;
  height: 35px;
}

    
        
            Number
            
        

        
            
                Dec: 10
                Bin: 01
            

введите описание изображения здесь

Answer 1

вместо margin для детей, вы можете использовать padding для родителя, поэтому его можно включить в box-sizing

---

, как указано в связанном ответе, который вы сказали не работает для вас, см. ниже ссылку на спецификацию размеров коробки, чтобы понять, как она работает и как ее использовать

---

возможный пример: https://jsfiddle.net/gr7cbevj/

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body,
pre {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.container_calculator {
  width: 100%;
  max-width: 400px;
  background-color: tomato;
  border-radius: 5px;
  margin: 5px auto;
  padding: 0 20px;/* added */
  box-sizing: border-box;/* added */
}

.container_calculator>label {
  display: inline-block;
  color: #fff;
  margin: 10px 0 0 0px;/* modified */
}

.container_calculator>input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 0px;/* modified */
}

div.result_bin2dec {
  border: 1px solid #edf2f7;
  background-color: #edf2f7;
  border-radius: 10px;
  margin-top: 30px;
  height: 35px;
}

  
    Number
    
  

  
    
                Dec: 10
                Bin: 01
            

см. Использование размер коробки .

Свойство box-sizing CSS определяет способ вычисления общей ширины и высоты элемента.

Answer 2

Просто вставьте padding в родительский элемент и удалите margin в поле ввода и метке.

.container_calculator {

   padding: 5px 20px;<-------------insert this line

   //Other codes...

}

.container_calculator > input {

  margin: 5px 20px;<--------------remove this

  //Other codes...

}

.container_calculator>label {

 margin: 10px 0 0 20px;<---------remove this

 //Other codes...

}

Для пробела между input и label вы можете использовать:

.container_calculator>input{

    margin-top:5px;

   //Other codes...

}

  html {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        *,
        *::before,
        *::after {
            -webkit-box-sizing: inherit;
            -moz-box-sizing: inherit;
            box-sizing: inherit;
        }
        
        body,
        pre {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 100%;
            max-width: 980px;
            margin: 0 auto;
        }
        
        .container_calculator {
            width: 100%;
            max-width: 400px;
            background-color: tomato;
            border-radius: 5px;
            margin: 5px auto;
            padding: 5px 20px;
        }
        
        .container_calculator>label {
            display: inline-block;
            color: #fff;
        }
        
        .container_calculator>input {
            height: 20px;
            border: 1px solid tomato;
            border-radius: 5px;
            width: 100%;
        }
        
        div.result_bin2dec {
            border: 1px solid #edf2f7;
            background-color: #edf2f7;
            border-radius: 10px;
            margin-top: 30px;
            height: 35px;
        }

            
                Number
                
            

            
                
                        Dec: 10
                        Bin: 01
                    

Answer 3

Вы добавляете 20px к марже.

измените css для этого элемента:

ПРЕДЫДУЩАЯ:

.container_calculator > input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 20px;
}

NEW:

.container_calculator input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 0px;
}

Answer 4

Вы можете установить ширину:

width: calc(100%-20px)

Если вы хотите, чтобы поле слева и справа было установлено на 10px