使元素填充其容器的宽度并且没有边距将其推出该容器？

Question

有没有办法让一个元素动态地填充它的容器的宽度并且有边距但不会溢出那个容器？

＆＃13;

＆＃13;

body {
	-moz-osx-font-smoothing: grayscale;
	font-family:Verdana;
	font-weight:normal;
	font-size:12px;
}

#BorderContainer2085  {
	position:absolute;
	top:30px;
	left:37px;
	width:340px;
	height:160px;
	display:inline-block;
	border-width:1px;
	border-color:#696969;
	border-style:solid;
	border-radius:0px;
}

#Button1199  {
	position:absolute;
	top:19px;
	margin-left:20px;
	margin-right:20px;
	width:100%;
}

＆＃13;

<div id="BorderContainer2085">
	<input id="Button1199" type="button" value="Button">
</div >

＆＃13;

＆＃13;

＆＃13;

以下是我的代码：

这就是我想要的：

Answer 1

对按钮元素使用width:calc(100% - 40px); - 是否会产生预期效果？

实施例：

body {
	-moz-osx-font-smoothing: grayscale;
	font-family:Verdana;
	font-weight:normal;
	font-size:12px;
}

#BorderContainer2085  {
	position:absolute;
	top:30px;
	left:37px;
	width:240px;
	height:160px;
	display:inline-block;
	border-width:1px;
	border-color:#696969;
	border-style:solid;
	border-radius:0px;
}

#Button1199  {
	position:absolute;
	top:20px;
	margin-left:20px;
	margin-right:20px;
	width:calc(100% - 40px);
}

<div id="BorderContainer2085">
	<input id="Button1199" type="button" value="Button">
</div >

Answer 2

＆＃13;

＆＃13;

body {
  -moz-osx-font-smoothing: grayscale;
  font-family: Verdana;
  font-size: 12px;
  font-weight: normal;
}

#BorderContainer2085 {
  border-color: #696969;
  border-radius: 0px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  height: 160px;
  left: 37px;

  /* Add this */
  padding-left: 20px;
  padding-right: 20px;
  
  position: absolute;
  top: 30px;
  width: 340px;
}

#Button1199 {
  /* You have to change absolute with relative
  position:absolute;*/
  position: relative;
  
  top: 19px;
  
  /* Remove this
	margin-left:20px;
	margin-right:20px;
  */
  
  width: 100%;
}

＆＃13;

<div id="BorderContainer2085">
 <input id="Button1199" type="button" value="Button">
</div >

＆＃13;

＆＃13;

＆＃13;