使用
inline-block元素时，
whitespace这些元素之间 始终存在 问题 （该空间大约为4px宽）。
因此，您的两个
divs都具有50％的宽度，加上
whitespace（〜4px）的宽度大于100％，因此会损坏。您的问题的示例：
body{ margin: 0; }div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div >foo</div><div >bar</div>有几种方法可以解决此问题：
1.这些元素之间没有空格
body{ margin: 0; }div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div >foo</div><div >bar</div>2.使用HTML注释
body{ margin: 0; }div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div >foo</div><!----><div >bar</div>3.将父级设置font-size
为0
，然后为inline-block
元素添加一些值
body{ margin: 0; }.parent{ font-size: 0; }.parent > div{ display: inline-block; width: 50%; font-size: 16px; }.left{ background-color: aqua;}.right{ background-color: gold;}<div > <div >foo</div> <div >bar</div></div>4.在它们之间使用负边距（ 不理想）
body{ margin: 0; }div{ display: inline-block; width: 50%; margin-right: -4px; }.left{ background-color: aqua;}.right{ background-color: gold;}<div >foo</div><div >bar</div>5.落角
body{ margin: 0; }div{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<div >foo</div><div >bar</div><hr><div >foo</div><div >bar</div>6.跳过某些HTML结束标记
body{ margin: 0; }ul{ margin: 0; padding: 0; }li{ display: inline-block; width: 50%;}.left{ background-color: aqua;}.right{ background-color: gold;}<ul> <li >foo <li >bar</ul>html{ font-size: 1em;}.ib-parent{ font-size: 0;}.ib-child{ display: inline-block; font-size: 1rem;}*
