<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
height:200px;
}
.c1{
width:50%;
background:red;
}
.c2{
width:50%;
background:green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
原因:两个元素之间存在回车,去掉之间的会回车
<div class="c1"></div><div class="c2"></div>