两个内联块元素，每个元素的宽度为50％，不能并排放置在一行中

使用

inline-block

whitespace

因此，您的两个

divs

whitespace

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;}

*