2つの要素の間にスペースを分割するときの余分なピクセル

Question

私は2つの子を持つブロック要素を持っています。これは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のマージンをそれぞれ持っています。つまり、2人の子供とそのマージンは、正確に300ピクセルを占める必要があります。私がこのように設定したら、彼らはラップします。子供1人につき余分に2ピクセルを差し引くと、余白を含めてそれぞれ148ピクセルしか測定されませんが、スペースを正確に埋めるように見えます。余分なピクセルはどこから来ていますか？

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

フレキシボックス行うことができます

#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>