3 回答
TA贡献1816条经验 获得超6个赞
相反margin
,您可以在parent上使用children 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;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>
请参阅box-sizing的使用。
CSSbox-sizing
属性设置如何计算元素的总宽度和高度。
TA贡献1865条经验 获得超7个赞
只需插入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;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>
TA贡献1804条经验 获得超8个赞
您正在向边距添加 20px。
更改此元素的 css:
以前的:
.container_calculator > input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 20px;
}
新的:
.container_calculator input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 0px;
}
- 3 回答
- 0 关注
- 109 浏览
添加回答
举报