padding to main div将main div及其子元素推向右侧

Question

我有100％宽度的主div和内部输入元素。当我给padding：15px到主div时，它将两个元素推向右边。

我将输入元素宽度设为95％，但仍无法正常工作。以下是我的代码。

＆＃13;

＆＃13;

header {
  width:100%;
  height:80px;
  padding: 15px;
  background: #25b99a;
  float:left;
  position: fixed;
  top:0;
  left:0;	
  z-index: 5;
  box-shadow: 0px 2px 4px rgba(44,62,80,0.20);
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
}

header input {
  width:100%;
  height:50px;
  float: left;	
  background: rgba(255,255,255,0.5);
  border-radius: 5px;
  border:0px;
  box-shadow: none;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
  appearance:none;
}

＆＃13;

<header>
  <input type="text">
  <button></button>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

box-sizing:border-box：宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距。

修复：

* {
   box-sizing: border-box;
}

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

header{
  width:100%;
  height:80px;
  padding: 15px;
  background: #25b99a;
  float:left;
  position: fixed;
  top:0;
  left:0; 
  z-index: 5;
  box-shadow: 0px 2px 4px rgba(44,62,80,0.20);
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
}

header input{
  width:100%;
  height:50px;
  float: left;    
  background: rgba(255,255,255,0.5);
  border-radius: 5px;
  border:0px;
  box-shadow: none;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
  appearance:none;
}

＆＃13;

<header>
  <input type="text">
  <button></button>
</header>

＆＃13;

＆＃13;

＆＃13;