Html 在div宽度内将文本框居中：100%在所有边上留一些边距

我需要在一个100%宽度的div中放置一个文本框，在所有边上留下

边距
。

我的问题是，我无法设置正确的边距，因为文本框的宽度为100%（这是必要的！）。

因此
textbox
和div容器必须具有100%的宽度（原因响应），并且
textbox
的所有边都需要8px的边距。



.search cont{
背景色：#c8c7cc；
宽度：100%；
高度：44px；
溢出：隐藏；
过渡：均为0.5s；
z指数：997；
位置：固定；
}
.搜索文本{
边界半径：5px；
边界：0px；
高度：28px；
填充：0px；
左侧填充：6px；
宽度：100%！重要；
保证金：8px！重要；
框大小：边框框；
显示：块；
背景色：#fff；
}
：-webkit输入占位符{
文本对齐：居中；
}
：-moz占位符{/*Firefox 18-*/
文本对齐：居中；
}
：-moz占位符{/*Firefox19+*/
文本对齐：居中；
}
：-ms输入占位符{
文本对齐：居中；
}
您可以在父标记上使用
填充
，而不是在元素上使用
边距

您需要添加
框大小：边框框到父元素（最佳做法是使用
*
选择器将其添加到任何元素）


*{
框大小：边框框；
}
身体{
保证金：0；
}
.搜索继续{
背景色：#c8c7cc；
宽度：100%；
高度：44px；
溢出：隐藏；
过渡：均为0.5s；
z指数：997；
位置：固定；
填充：8px；
}
.搜索文本{
边界半径：5px；
边界：0px；
高度：28px；
填充：0px；
左侧填充：6px；
宽度：100%！重要；
/*保证金：8px！重要*/
框大小：边框框；
显示：块；
背景色：#fff；
}
：-webkit输入占位符{
文本对齐：居中；
}
：-moz占位符{/*Firefox 18-*/
文本对齐：居中；
}
：-moz占位符{/*Firefox19+*/
文本对齐：居中；
}
：-ms输入占位符{
文本对齐：居中；
}
只需在分区中添加一个填充。框大小：边框框

padding: 8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

然后删除输入上的边距。
如果您仍想在
中使用
宽度：100%
。搜索文本
，您可以使用
填充
和/或
边框
进行如下操作：

.search-text {
    border-radius:5px;
    border:0px;
    height:28px;
    padding:0px;
    padding-left:6px;
    width: 100% !important;
    border: 8px solid transparent !important; /* use border as margin */
    box-sizing:border-box;
    display:block;
    background-color:#fff;
}

使用以下小补丁：

*{框大小：边框框；}
删除相同元素上的
width
和
margin
在
div
上使用
padding
，而不是在
input
上使用
margin
工作片段


*{
框大小：边框框；
}
.搜索继续{
背景色：#c8c7cc；
高度：44px；
溢出：隐藏；
过渡：均为0.5s；
z指数：997；
位置：固定；
左：10px；
右：10px；
}
.search cont div{
填充：8px；
}
.搜索文本{
边界半径：5px；
边界：0px；
高度：28px；
填充：0px；
文本缩进：6px；
宽度：100%！重要；
框大小：边框框；
显示：块；
背景色：#fff；
}
：-webkit输入占位符{
文本对齐：居中；
}
：-moz占位符{
/*火狐18-*/
文本对齐：居中；
}
：-moz占位符{
/*Firefox 19+*/
文本对齐：居中；
}
：-ms输入占位符{
文本对齐：居中；
}
查找您可以使用的搜索文本

width: calc(100% - 22px) !important; 

其中22px=8px（左边距）+8px（右边距）+6px（左边距）
您可以使用它来实现所需的结果（另外，
主体
标记具有默认值
边距：8px
）


但是，使用长方体大小调整就像使用不同的长方体模型（实际情况）

作为替代方案，您可以使用来实现相同的效果，除非您可以控制计算


另外，您不需要任何
！重要信息
在那里，
！重要信息
存在着覆盖过于特定的选择器的功能-使用它并不一定不好，但太容易使用它会破坏它作为最后手段的目的：）。
你在写谁？
/*resetting body margin*/
body {
    margin: 0;
}

.search-cont {
    box-sizing: border-box;
    padding: 8px;
    /*...snipped...*/
}

.search-text {
    margin: 8px; /*REMOVE THIS LINE*/
    /*...snipped...*/
}

.search-text {
    width: calc(100% - 16px); /*margin on both sides*/
    /*...snipped...*/
}