我正在研究css-variables和css calc（），因此虽然以下代码示例有些人为设计，但我尝试使用一个div与另一个div居中的方式来尝试变量和calc，其中div包含另一个div创建css规则的最终目标，该规则可以从一个选择器规则的css变量获取信息，并将其用于另一卖方规则的css calc（）。
div {
display: inline-block;
}
#d1a,#d1b {
--widthD1: 100px;
width: var( --widthD1 );
}
#d2a,#d2b {
--widthD2: 16px;
width: var( --widthD2 );
background-color: yellow;
border: thin solid black;
}
#d3a,#d3b {
width: 100%; /* width of d1a or d1b : 100px */
background-color: lightgreen;
border: thin solid black;
}
#d3a {
padding-left: calc( var( --widthD1 ) - /* ( 100px - 16px ) 2 = 42px */
var( --widthD2 ) / 2 );
padding-right: calc( var( --widthD1 ) -
var( --widthD2 ) / 2 );
}
#d3b {
padding-left: 42px;
padding-right: 42px;
}<div id="d1a">
<div id="d3a">
<div id="d2a">Hi</div>
</div>
</div>
There -- Not what I'm trying to do!
<hr>
<div id="d1b">
<div id="d3b">
<div id="d2b">Hi</div>
</div>
</div>
There -- The desired result,except
why is the second/lower green area wider than the first/upper green area?
我意识到这不是将div置于父div中间的最佳方法。
另外，在第二个示例中，为什么绿色区域与第一个示例的绿色区域大小不一样？
谢谢