在两个元素之间分割空间时的额外像素

Question

我有一个有两个子元素的块元素，我会分别占用一半的空间，减去它们之间的固定大小的空隙。这应该是容易calc()：

var left = document.getElementById("left"); 
 
var right = document.getElementById("right"); 
 
var info = document.getElementById("info"); 
 

 
var offset = 5; 
 
function toggleStyle() { 
 
    if (offset === 5) { 
 
    offset = 7; 
 
    } else { 
 
    offset = 5; 
 
    } 
 
    info.innerHTML = right.style = left.style = "width: calc(50% - " + offset + "px);"; 
 
} 
 

 
toggleStyle();

#container { 
 
    width: 300px; 
 
    height: 160px; 
 
    background-color: green; 
 
} 
 

 
#left, #right { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    height: 150px; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
} 
 

 
#left { 
 
    margin-right: 5px; 
 
} 
 

 
#right { 
 
    margin-left: 5px; 
 
}

<div id="info"></div> 
 
<button onclick="toggleStyle()">Toggle</button> 
 
<div id="container"> 
 
    <div id="left"></div> 
 
    <div id="right"></div> 
 
</div>

在上面的代码中，我有一个300像素家长带着孩子，应该是50% - 5px = 145px（宽），加上保证金为5px每个。这意味着两个孩子，加上他们的利润，应该占据300px。当我以这种方式设置它们时，它们会缠绕。如果我为每个孩子减去额外的2个像素，它们似乎完全填充空间，尽管它们每个仅测量148px（包括边距）。多余的像素来自哪里？

Answer 1

它是左右div之间的空白区域。

如果删除它们之间的空白，即它会正常工作：

<div id="container"> 
    <div id="left"></div><div id="right"></div> 
</div> 

工作片段：

var left = document.getElementById("left"); 
 
var right = document.getElementById("right"); 
 
var info = document.getElementById("info"); 
 

 
var offset = 5; 
 
function toggleStyle() { 
 
    if (offset === 5) { 
 
    offset = 7; 
 
    } else { 
 
    offset = 5; 
 
    } 
 
    info.innerHTML = right.style = left.style = "width: calc(50% - " + offset + "px);"; 
 
} 
 

 
toggleStyle();

#container { 
 
    width: 300px; 
 
    height: 160px; 
 
    background-color: green; 
 
} 
 

 
#left, #right { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    height: 150px; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
} 
 

 
#left { 
 
    margin-right: 5px; 
 
} 
 

 
#right { 
 
    margin-left: 5px; 
 
}

<div id="info"></div> 
 
<button onclick="toggleStyle()">Toggle</button> 
 
<div id="container"> 
 
    <div id="left"></div><div id="right"></div> 
 
</div>

Answer 2

Flexbox的能做到这一点

#container { 
 
    width: 300px; 
 
    margin: 1em auto; 
 
    height: 160px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
#left, 
 
#right { 
 
    background-color: lightblue; 
 
    height: 150px; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    flex: 1; 
 
} 
 

 
#left { 
 
    margin-right: 5px; 
 
}

<div id="container"> 
 
    <div id="left"></div> 
 
    <div id="right"></div> 
 
</div>

CSS网格也能做到这一点。

#container { 
 
    width: 300px; 
 
    margin: 1em auto; 
 
    height: 160px; 
 
    background-color: green; 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-gap: 5px; 
 
} 
 

 
#left, 
 
#right { 
 
    background-color: lightblue; 
 
    height: 150px; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
}

<div id="container"> 
 
    <div id="left"></div> 
 
    <div id="right"></div> 
 
</div>